我已经创建了一个菜单,我正在尝试在悬停时实现一个下拉菜单,它似乎不正确,我们将不胜感激。为什么下拉出现在不同的位置?
<ul class="menu">
<li><a href="index.html">Home</a>
<ul class="menu">
<li><a href="index.html">Home</a></li></ul>
</li> |
<li class="active"><a href="about.html">About</a></li> |
<li><a href="products.html">Products</a></li> |
<li><a href="clients.html">Clients</a></li> |
<li><a href="contact.html">Reach Us</a></li>
<div class="clear"></div>
</ul>
.menu{
float:left;
color: #555555;
margin-top: 25px;
}
.menu ul {}
.menu li{
display: inline-block;
margin:6px 20px;
}
.menu li a{
display: block;
color: #000;
line-height: 1.8em;
text-transform: capitalize;
font-size: 14px;
font-weight: 400;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
padding: 5px;
}
.menu li:hover > ul {
display: block;
}
.menu li.active a{
color: #52ABDF;
background: white;
}
.menu li a:hover{
color: #ooo;
background: #52ABDF;
padding: 5px;
}
.menu li ul{
display: none;
}
.menu ul li:hover ul{
display: block;
margin-left:0px;
}
.menu li ul li {
float: none;
display: inline;
}
.menu li ul li a {
position: relative;
border-left: 1px solid black;
border-right: 1px solid black;
border-bottom: 1px solid black;
background: #333;
color: #ooo;
}
.menuli ul li a:hover {
background: #066;
color: #000;
}
最佳答案
作为提示,
you should never use '|' symbol to seperate the
<li>
s, because it makes the html meaningless. The<ul>
tag is expected to have only<li>
tags as its children.. You could use the border-right property instead. and use
ul li:last-of-type(){
border: 0;
}
to eliminate the border on the last
<li>
使用这个 css,你的就可以了:
.menu,
.menu li ul{
float:left;
color: #555555;
margin-top: 0;
list-style: none;
padding: 0;
}
.menu{
margin-top: 25px;
}
.menu ul:after{
content: "";
display: block;
clear: both;
}
.menu li{
float: left;
position: relative;
}
.menu li a{
display: block;
color: #000;
line-height: 2em;
text-transform: capitalize;
font-size: 14px;
font-weight: 400;
padding: 0 20px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.menu li:hover > ul {
display: block;
}
.menu li.active a{
color: #52ABDF;
background: white;
}
.menu li a:hover{
color: #ooo;
background: #52ABDF;
}
.menu li ul{
display: none;
position: absolute;
background: #bbb;
}
.menu li ul li {
display: inline ;
}
.menu li ul li a {
position: relative;
border-left: 1px solid black;
border-right: 1px solid black;
border-bottom: 1px solid black;
background: #333;
color: #ooo;
}
.menuli ul li a:hover {
background: #066;
color: #000;
}
如果您想真正学习如何制作样式更好的下拉菜单,请使用本教程: http://andornagy.com/css-dropdown-menu/
它也很容易理解,而且看起来还不错......
关于html - 下拉菜单的问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25102745/