* 在发布问题之前,我在网站上搜索了一个答案,我尝试了多种解决方案,没有任何方法可以解决我的确切代码。虽然您可能会在此网站上发现重复的问题。除非编码与解决方案完全相同,否则我不认为它是重复的。这个网站上的任何内容都没有为我的确切编码工作,因此我需要发布我的确切代码以寻求帮助。 *
我有一个类似下面的菜单。并下降它。现在,嵌套的ul只是简单地遍布整个页面。它需要出现在管理下的一个很好的下拉部分。我一直试图寻找这个并且问我的同事之前他们都没有做过。我在这里创建了一个jsFiddle:http://jsfiddle.net/z3Lpm/
<div id="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Administration</a>
<ul>
<li><a href="#">Products</a></li>
</ul>
</li>
</ul>
</div>
(不是我的完整菜单,但你明白了。)
然后我的css:
#menu{
width: 100%;
border: 1px solid #000;
height: 50px;
background-color:#181818;
font-family: Helvetica, sans-serif;
font-size: 13px;
}
#menu ul{
margin-top: 20px;
}
#menu ul li{
list-style-type: none;
display: inline;
margin-left: 50px;
}
#menu ul li a:link{
color: #FFF;
text-decoration: none;
text-transform: uppercase;
padding-top: 40px;
padding-bottom: 40px;
padding-left: 20px;
padding-right: 20px;
}
#menu ul li a:visited{
color: #FFF;
text-decoration: none;
text-transform: uppercase;
}
#menu ul li a:hover{
color: #FFF;
background-color: #81B101;
-webkit-box-shadow: 0px 4px 5px rgba(50, 50, 50, 0.93);
-moz-box-shadow: 0px 4px 5px rgba(50, 50, 50, 0.93);
box-shadow: 0px 4px 5px rgba(50, 50, 50, 0.93);
}
答案 0 :(得分:1)
在这里,我没有改变颜色或任何东西,因为我不知道你在做什么。如果这对您有用,请告诉我。
http://jsfiddle.net/talymo/LDNpG/
#menu{
background-color:#181818;
font-family: Helvetica, sans-serif;
font-size: 13px;
height:50px;
}
#menu ul{
list-style:none;
padding-top:15px;
}
#menu ul li{
padding:0px 20px;
width:auto;
float:left;
position:relative;
}
#menu ul li:hover > ul{
display:block;
}
#menu ul li a{
color: #FFF;
text-decoration: none;
text-transform: uppercase;
padding-top: 40px;
padding-bottom: 40px;
padding-left: 20px;
padding-right: 20px;
}
#menu ul li a:hover{
color: #FFF;
background-color: #81B101;
-webkit-box-shadow: 0px 4px 5px rgba(50, 50, 50, 0.93);
-moz-box-shadow: 0px 4px 5px rgba(50, 50, 50, 0.93);
box-shadow: 0px 4px 5px rgba(50, 50, 50, 0.93);
}
#menu ul li ul{
overflow:hidden;
padding:0;
margin:0;
display:none;
position:absolute;
top:20px;
}