css实现多级下拉菜单---Day03

事情在开始的时候总是最简单，最有激情，却这时候又是最难的时刻，最迷茫的时刻。

* 看吧，只是应用了css啊，没有技术含量；

* 做的是软件研发哎，那么纠结于界面做什么，没技术含量；

* 还在研究css？能不能学点新东西啊；

种种的自我否定，往往让我容易忽视掉自己还只是个菜鸟的现实，尽管我始终都在克制。

不是我急功近利，不是我眼高手低，只是我对那远方的渴望太强烈，对那梦想太在乎，不同于往昔研究出一件事物的成就感，当前发现问题的具体实现时，却总是带着一种失落：原来还只是这么简单，没有学到新东西啊。真的是怕啊，怕这而立之前的奋斗又会无疾而终，怕自己再败给了自己。

每每等我清醒过来，才能鼓足勇气，终究我还只是个菜鸟，just do it

下面我们来记录下多级下拉菜单的实现

基本功能：

多层级、下拉表、菜单

应用举例：

像爱淘宝



像乐峰网



个人感觉：

实话说，这种多级下拉菜单在现阶段的前端界面中很少见了，本着简介、直接的原则，前端原来越多的对于这种层层相套的方式进行排斥，但是作为曾经经典的一种菜单形式，感觉有必要了解一下

具体实现：

1、首先我们分析基本功能分三部分：多层级的、包含下拉部分、是一个菜单。这样我们先来编写body部分（先将整体的部分写出来，所有的子菜单全部罗列出来，实现层级）

 <div id="menu">
<ul id="nav">  
<li class="site-name"><a href="#"> </a></li>  
   <li class="yahoo"><a href="http://www.freejs.net/daohangcaidan.html">导航菜单</a>  
       <ul>  
       <li><a href="#">导航菜单二级分类 »</a>              
           <ul>  
               <li><a href="#">1</a></li>  
               <li><a href="#">2</a></li>  
               <li><a href="#">3</a></li>  
               <li><a href="#">导航菜单三 »</a>  
               <ul>  
                   <li><a href="#">导航菜单4</a></li>  
                   <li><a href="#">1</a></li>  
               </ul>  
               </li>  
           </ul>  
       </li>  
       <li><a href="#">1</a></li>  
       <li><a href="#">2</a></li>  
       </ul>  
   </li>   
   <li class="facebook"><a href="#">翻页</a>  
       <ul>  
       <li><a href="#">1</a></li>  
       <li><a href="#">2</a></li>  
       </ul>  
   </li>  
</ul>  
</div>

这样我们先来看下效果：



2、这样我们将子菜单部分首先隐藏起来，对于顶层菜单进行改动成普通菜单的样式，满足是一个菜单

加入如下的css样式部分#nav ul，#nav ul ul，#nav ul ul ul{display:none;}

#nav li{list-style: none;display: block;  float: left;  height: 40px;  position: relative;  border-right: 1px solid #323232;  }  

#nav li a{display: block;padding: 0px 10px 0px 30px;  margin: 0px 0;line-height: 40px;text-decoration: none;border-right: 1px solid #636161;height: 40px;color: #FFF;text-shadow: 1px 1px 1px #66696B;}

#nav li.facebook{  background: url(images/facebook.png) no-repeat 9px 12px;  }  

#nav li.facebook:hover  {background: url(images/facebook.png) no-repeat 9px 12px #010101;  }  

#nav li.yahoo{background: url(images/yahoo.png) no-repeat 9px 12px;  }  

#nav li.yahoo:hover  {background: url(images/yahoo.png) no-repeat 9px 12px #010101;  }  

#nav li:hover{background: #010101;}  

加入以上样式之后，这时候的效果如何呢：



3、这样我们就实现了一个菜单的问题，接下里我们来实现它的下拉部分

在css样式部分加入#nav li:hover > ul{display: block;visibility:visible;} 

以及各部分的样式设计

#nav ul，#nav ul ul，#nav ul ul ul{display:none; visibility:hidden; }

#nav ul{display: none;  visibility:hidden;  position: absolute;   background: #f2f5f6;padding: 0px;border-bottom: 1px solid #DDDDDD;  

border-right: 1px solid #DDDDDD;border-left:1px solid #DDDDDD;border-radius: 0px 0px 3px 3px;  box-shadow: 2px 2px 3px #ECECEC;-webkit-box-shadow: 2px 2px 3px #ECECEC;-moz-box-shadow:2px 2px 3px #ECECEC;width:170px;}    

#nav ul li {border-right:none;border-bottom:1px solid #DDDDDD;width:170px;height:39px;}  

#nav ul li a { border-right: none;  color:#6791AD;  text-shadow: 1px 1px 1px #FFF;  border-bottom:1px solid #FFFFFF; }  

#nav ul li:hover{background:#DFEEF0;}  

#nav ul li:last-child { border-bottom: none;}  

#nav ul li:last-child a{ border-bottom: none;}  

#nav ul li{display: block;visibility:visible;}  

#nav ul ul{top: 0px;left:170px;display:none;visibility:hidden;  border: 1px solid #DDDDDD;  }  

#nav ul ul ul{  top: 0px;   left:170px;  display: none;visibility:hidden;border: 1px solid #DDDDDD;}

#nav .site-name,#nav .site-name:hover{padding-left: 10px;padding-right: 10px;color: #FFF;  background: url(images/logo.png) no-repeat 10px 5px;  width: 160px; }  

#nav .site-name a{   width: 129px;   overflow:hidden;  }  

这时我们再来看这个效果：



这样我们要实现的多级下拉菜单就算大功告成了，现在我们来回味一下关键点都有哪些：

1、基础菜单的实现（这是菜单的基本步骤，应该都不陌生）；

2、：hover>ul的应用，这是实现下拉框的至关重要的部分；

3、padding-left，下拉列表框部分在继续生成时，避免重复的应用，起码我在这个地方被纠结了好久。

好吧，今天就先到这里吧，明天周一，大家睡个好觉