zblog二级导航设置代码

zblogphp二级菜单 zblog二级导航设置代码

<div id="divNavBar">

  <ul>

    <li>一级</li>

    <li>一级

      <ul>

        <li>二级</li>

        <li>二级

          <ul>

            <li>三级</li>

            <li>三级</li>

          </ul>

        </li>

      </ul>

    </li>

  </ul>

</div>

js

<script type="text/javascript">
$(document).ready(function(){
  $("dd").hide();
  $("dt a").click(function(){
  $(this).parent().toggleClass("bg");
  $(this).parent().prevAll("dt").removeClass("bg")
  $(this).parent().nextAll("dt").removeClass("bg")
  $(this).parent().next().slideToggle();
  $(this).parent().prevAll("dd").slideUp("slow");
  $(this).parent().next().nextAll("dd").slideUp("slow");
  return false;
  });
});
</script>
<script>

$(document).ready(function(){

  $('ul li').hover(function(){                

                $(this).children('ul').show();

        },function(){

                $(this).find('ul').hide();

        });

});

 </script>

css样式

/* #divNavBar ul, #divNavBar li { */

 /* list-style: none; */

/* } */

#divNavBar ul li {

 /* float: left; */

 /* margin: 0 10px; */

 font-size: 1.25em;

 /* line-height: 40px; */

 /* position: relative; */

 /* transition: all 0.4s ease 0s; */

}

#divNavBar ul li ul {
    /* position: absolute; */
    /* left: -1px; */
    /* top: 40px; */
    background: #2c2e2f;
    /* border: 1px solid #eee; */
    /* border-radius: 0 0 3px 3px; */
    width: 100%;
    padding: 5px 0;
    display: none;
    z-index: 2;
}

#divNavBar ul li ul li {

 font-size: 0.75em;

 margin: 0;

 float: none;

 text-align: center;

 /* line-height: 2em; */

}

#divNavBar ul li ul li ul {
 position: absolute;

 z-index: 4;

 left: 100%;

 top: -5px

}