我的导航面板差不多完成了。
如何为此添加子菜单。我在产品页面上有我的子菜单。
这里是带有子菜单的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;
}
谢谢你们的好手!
更多力量!
答案 0 :(得分:0)
你可以这样做,但你也必须改变某些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;
}
答案 1 :(得分:0)
<!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 »</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>
答案 2 :(得分:0)
我已更正您的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;
}