JQuery写菜单导航

原文链接： https://blog.csdn.net/qq_45746493/article/details/102734478

效果

用scc写出页面的样式
<style>
.nav{
    width:900px;
    height:36px;
    position:relative;
  background-color: blue;
    text-align:center;
    line-height:36px;
    font-size:12px;
  color: black;
  margin: auto;
  margin-top: 100px;
}
.nav li:hover{
    background: #EEEEEE;
    color: #000000;
  }
li{
    list-style: none;
    float:left;
}
.main>li{
    width:150px;
    color:#eee;
    font-size:14px;
}
.main span{
    display:inline-block;
    width:7px;
    height:7px;
    background:url(../images/down-icon.png) no-repeat;
    margin-left:18px;
}
.box_info{
    width: 110px;
    border: 1px solid #643519;
    display:none;
    position:absolute;
    color:#643519;
    padding:0;
    margin-left:20px;
}
.box_info li{
    color: #643519;
    cursor: pointer;
    font-size:13px;
    width:100%;
}
.service{
 color: #0000FF;
}
</style>
————————————————
版权声明：本文为CSDN博主「qq_45746493」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_45746493/article/details/102734478

使用ul,li写出表格

css
<div class="nav">
  <ul class="main">
      <li class="service">HOME</li>
      <li id="li-1" class="service">CSS
          <span></span>
          <ul id="box_1" class="box_info">
              <li>CSS入门</li>
              <li>CSS工具</li>
              <li>CSS技巧</li>
          </ul>
      </li>
      <li id="li-2">网页特效
          <span></span>
          <ul id="box_2" class="box_info">
              <li>导航菜单</li>
              <li>表单按钮</li>
              <li>表格图层</li>
          </ul>
      </li>
   <li id="li-3">Javascript
     <span></span>
     <ul id="box_3" class="box_info">
       <li>Jquery</li>
       <li>js学习</li>
       <li>js教程</li>
     </ul>
   </li>
      <li>关于我们
      </li>
  </ul>
</div>
————————————————

使用JQuery写出特效

<script>
$(function(){
    var num;
    $('.main>li[id]').hover(function(){
        /*图标向上旋转*/
        $(this).find("span").removeClass().addClass('hover-up');
        /*下拉框出现*/
        var Obj = $(this).attr('id');
        num = parseInt(Obj.substring(3, Obj.length));
        $('#box_'+num).slideDown(300);
    },function(){
        /*图标向下旋转*/
        $(this).find("span").removeClass().addClass('hover-down');
        /*下拉框消失*/
        $('#box_'+num).hide();
    });
});
</script>
————————————————