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

作为小费，

你永远不应该使用＆＃39; |＆＃39;用于分隔<li>的符号，因为它使html毫无意义。 <ul>标记只能使用 <li>标记为其子项。您可以使用border-right属性。并使用

ul li:last-of-type(){
  border: 0;
}

取消上一个<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/

它也非常简单易懂，而且看起来也不错......

问题与下拉菜单

1 个答案: