如何添加下拉式子菜单

如何我会添加一个子菜单到这一点。我在产品页面有我的子菜单。

下面是与子菜单中的HTML它：

<nav> 

<ul> 

    <li><a href="">HOME</a></li> 
    <li><a href="">PRODUCTS</a> 
     <ul> 
      <li><a href="">T-SHIRTS</a></li> 
      <li><a href="">MUGS</a></li> 
      <li><a href="">CUPS</a></li> 
      <li><a href="">JEANS</a></li>    
     </ul>   
    </li> 
    <li><a href="">SERVICES</a></li> 
    <li><a href="">GALLERY</a></li> 
    <li><a href="">ABOUT US</a></li> 
    <li><a href="">CONTACT US</a></li> 

</ul> 


</nav>

这里我的CSS：

nav{ 
    width:1000px; 
    height:50px; 
    background-color:#333; 
    margin: 0 auto; 
    padding: 20px 20px 20px 20px; 
    font-family: NeoSans; 
    text-align: center; 
    overflow: hidden; 
} 

nav ul{ 
    list-style: none; 
} 

nav ul ul{ 
    display: none; 
} 

nav ul li{ 
    display: inline; 
    float: left; 
} 

nav ul li a{ 
    color: #CCC; 
    text-decoration: none; 
    padding: 40px 41px 40px 41px;  
} 

nav ul li a:hover{ 
    color: #F60; 
    background-color: #000; 
}

谢谢你们了很好的手！

更多的力量！

来源

2014-05-05 JOE MAYA

你能做到这样，但你也必须改变的anchor像padding一些样式和其他一些东西：

nav ul { 
    list-style: none outside none; 
    position: relative; 
} 
nav ul ul { 
    display: block; 
    position: absolute; 
    width: 120px; 
} 
ul ul li { 
    width: 120px; 
} 
ul li:hover ul{ 
    display:block; 
}

来源

2014-05-05 06:17:00

Example

<!doctype html> 
<html> 
<head> 
    <style> 
    .nav, .sub { 
     font-family: Arial, Helvetica, sans-serif; 
     list-style: none; 
     margin: 0; 
     padding: 0; 
    } 
    .nav li { 
     background: #cb1212; 
     height: 40px; 
     line-height: 40px; 
     text-align: center; 
     width: 160px; 
    } 
    .nav li a { 
     display: block; 
     text-decoration: none; 
     color: #fff; 
    } 
    .nav li a:hover { 
     background: #f00; 
    } 
    .nav > li { 
     border-right: 1px solid #f00; 
     float: left; 
    } 
    .sub { 
     display: none; 
    } 
    .nav > li:hover .sub { 
     display: block; 
    } 
    .sub li { 
     border-top: 1px solid #f00; 
    } 
    </style> 
</head> 
<body> 
    <ul class="nav"> 
    <li><a href="#">Home</a></li> 
    <li><a href="#">About</a></li> 
    <li><a href="#">Contact</a></li> 
    <li> 
     <a href="#">Services &raquo;</a> 
     <ul class="sub"> 
     <li><a href="#">Social Media</a></li> 
     <li><a href="#">Web Development</a></li> 
     <li><a href="#">SEO</a></li> 
     </ul> 
    </li> 
    <li><a href="#">Products</a></li> 
    </ul> 
</body> 
</html>

来源

2014-05-05 06:38:11

我已经纠正你的CSS和更新here

html

<nav> 

<ul> 

    <li><a href="">HOME</a></li> 
    <li><a href="">PRODUCTS</a> 
     <ul> 
      <li><a href="">T-SHIRTS</a></li> 
      <li><a href="">MUGS</a></li> 
      <li><a href="">CUPS</a></li> 
      <li><a href="">JEANS</a></li>    
     </ul>   
    </li> 
    <li><a href="">SERVICES</a></li> 
    <li><a href="">GALLERY</a></li> 
    <li><a href="">ABOUT US</a></li> 
    <li><a href="">CONTACT US</a></li> 

</ul> 


</nav>

CSS

nav{ 
    width:1000px; 
    height:50px; 
    background-color:#333; 
    font-family: NeoSans; 
    line-height:50px; 
} 

nav ul, nav ul li{ 
    list-style: none; 
    padding:0; 
    margin:0; 
} 

nav ul li ul{ 
    display: none; 
} 

nav ul li{ 
    display: inline; 
    float: left; 
    position:relative; 
} 

nav ul li a{ 
    color: #CCC; 
    text-decoration: none; 
    padding:0 10px; 
    display:block; 
} 

nav ul li a:hover{ 
    color: #F60; 
    background-color: #000; 
} 
nav ul li:hover ul{ 
    display:block; 
    position:absolute; 
    left:0; 
    width:200px; 
    top:51px; 
    background:#333; 
    text-align:left; 
} 
nav ul ul li{ 
    float:none; 
    display:block; 
} 
nav ul ul li a{ 
    padding:0; 
    disbplay:block; 
    padding:0 10px; 
}

来源

2014-05-05 07:18:55 ilmk

这一个对我的作品！谢啦！ –

欢迎好友.. – ilmk

如何添加下拉式子菜单

回答

相关问题