html - 下拉菜单的问题

Question

我已经创建了一个菜单，我正在尝试在悬停时实现一个下拉菜单，它似乎不正确，我们将不胜感激。为什么下拉出现在不同的位置？

 <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; 
}

这是密码笔:http://codepen.io/anon/pen/EtmAB

Answer 1

作为提示，

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/

它也很容易理解，而且看起来还不错......