水平子菜单

Question

我想创建水平子菜单。 Hovewer现在我只创建了dopdown子菜单。我有以下css和html代码，请参阅演示：

你能帮我改进我的代码吗？谢谢。

HTML

<ul id="menu-main-menu" class="top_big_menu"><li id="menu-item-4192" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-4192"><a href="#">Home</a></li> 
<li id="menu-item-4159" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-4159"><a href="#">Football</a><ul> 
     <li><a href="#">News</a></li> 
     <li><a href="#">Interviews</a></li> 
     <li><a href="#">Comments</a></li> 
     </ul></li> 
<li id="menu-item-4160" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-4160"><a href="#">Football 2</a><ul> 
     <li><a href="#">News 2</a></li> 
     <li><a href="#">Interviews 2</a></li> 
     </ul></li> 
<li id="menu-item-4161" class="menu-item menu-item-type-taxonomy menu-item-object-category current-menu-item menu-item-4161"><a href="#">Football 3</a><ul> 
     <li><a href="http://www.example.com/child1.com">News 3</a></li> 
     <li><a href="http://www.example.com/child2.com">Interviews 3</a></li> 
     </ul></li> 
<li id="menu-item-4190" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4190"><a href="#">Menu 4</a></li> 
<li id="menu-item-4189" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4189"><a href="#">Menu 5</a></li> 
</ul> 

CSS

.top_big_menu li{ 
    display: inline-block; 
    float: none; 
    position: relative; 
    bottom: -10px; 
    float: left; 
    margin-left:1px; 
} 

.top_big_menu li a{ 
    font-family: 'Calibri',sans-serif; 
    font-weight: bold; 
    font-size: 20px; 
    color: #212121; 
    text-transform: uppercase; 
    display: block; 
    padding-left: 20px; 
    padding-right: 20px; 
    line-height: 50px; 
    border-top-left-radius: 5px; 
    border-top-right-radius: 5px; 
    -webkit-transition: all 0.2s; 
    -moz-transition: all 0.2s; 
    -ms-transition: all 0.2s; 
    -o-transition: all 0.2s; 
    transition: all 0.2s; 
} 

.top_big_menu li a:hover{ 
    background-color: #E31E24; 
    color: #fff; 
    text-decoration: none; 
} 

.top_big_menu .current-menu-item a, .top_big_menu .current_page_item a{ 
    background-color: #E31E24; 
    color: #fff; 
} 

.top_big_menu li ul{ 
display: none; 
position:absolute; 
z-index:2; 
padding-bottom:13px; 
} 

.top_big_menu li:hover ul{ display:inline; 
color:white; 
background:#E31E24; 
height:auto; 
border-bottom-left-radius: 5px; 
border-bottom-right-radius: 5px; } 

https://jsfiddle.net/mart01/8vbnhxx0/

Answer 1

#menu-main-menu{ 
position: relative; 
} 

应用而不是应用position:relative到.top_big_menu li{}选中此link上面的代码。

Answer 2

例Fiddle垂直和水平菜单。在你的例子中，你需要使用直接样式继承和使用：从那里悬停，而不是从链接on this fiddle。

.menu { 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
    position: relative; 
 
} 
 

 
.sub-menu { 
 
    display: none; 
 
    /* position: absolute; */ 
 
    top: 100%; 
 
    background-color: green; 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
} 
 

 
.sub-menu > li { 
 
    position: relative; 
 
} 
 

 
.sub-menu > li > a { 
 
    display: block; 
 
    padding: 5px 10px; 
 
} 
 

 
.menu > li { 
 
    /* position: relative; */ 
 
    padding: 5px; 
 
} 
 

 
.menu li:hover > .sub-menu { 
 
    display: block; 
 
} 
 

 
.menu > li > a { 
 
    display: block; 
 
    text-decoration: none; 
 
    padding: 5px 10px; 
 
    background-color: tomato; 
 
} 
 

 
.sub-menu .sub-menu { 
 
    padding-left: 20px; 
 
    left: 100%; 
 
    top: 0; 
 
    min-width: 120px; 
 
} 
 

 
.menu-inline > li { 
 
    display: inline-block; 
 
} 
 

 
.menu-inline .sub-menu { 
 
    position: absolute; 
 
} 
 

 
.menu-inline .sub-menu .sub-menu { 
 
    padding-left: 0; 
 
}

<ul class="menu"> 
 
    <li> 
 
    <a href="#">menu-link</a> 
 
    <ul class="sub-menu"> 
 
     <li> 
 
     <a href="#">sub-menu-link</a> 
 
     <ul class="sub-menu"> 
 
      <li> 
 
      <a href="#">sub-menu-link</a> 
 
      <ul class="sub-menu"> 
 
       <li><a href="#">sub-menu-link</a> 
 
       </li> 
 
       <li><a href="#">sub-menu-link</a> 
 
       </li> 
 
       <li><a href="#">sub-menu-link</a> 
 
       </li> 
 
       <li><a href="#">sub-menu-link</a> 
 
       </li> 
 
      </ul> 
 
      </li> 
 
      <li><a href="#">sub-menu-link</a> 
 
      </li> 
 
      <li><a href="#">sub-menu-link</a> 
 
      </li> 
 
      <li><a href="#">sub-menu-link</a> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
     <li><a href="#">sub-menu-link</a> 
 
     </li> 
 
     <li><a href="#">sub-menu-link</a> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
    <li> 
 
    <a href="#">menu-link</a> 
 
    <ul class="sub-menu"> 
 
     <li><a href="#">sub-menu-link</a> 
 
     </li> 
 
     <li><a href="#">sub-menu-link</a> 
 
     </li> 
 
     <li><a href="#">sub-menu-link</a> 
 
     </li> 
 

 
    </ul> 
 
    </li> 
 
    <li> 
 
    <a href="#">menu-link</a> 
 
    <ul class="sub-menu"> 
 
     <li><a href="#">sub-menu-link</a> 
 
     </li> 
 
     <li><a href="#">sub-menu-link</a> 
 
     </li> 
 
     <li><a href="#">sub-menu-link</a> 
 
     </li> 
 
     <li><a href="#">sub-menu-link</a> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
    <li> 
 
    <a href="#">menu-link</a> 
 
    <ul class="sub-menu"> 
 
     <li><a href="#">sub-menu-link</a> 
 
     </li> 
 
     <li><a href="#">sub-menu-link</a> 
 
     </li> 
 
     <li><a href="#">sub-menu-link</a> 
 
     </li> 
 
     <li><a href="#">sub-menu-link</a> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
</ul> 
 

 

 

 

 

 
<ul class="menu menu-inline"> 
 
    <li> 
 
    <a href="#">menu-link</a> 
 
    <ul class="sub-menu"> 
 
     <li> 
 
     <a href="#">sub-menu-link</a> 
 
     <ul class="sub-menu"> 
 
      <li><a href="#">sub-menu-link</a> 
 
      </li> 
 
      <li> 
 
      <a href="#">sub-menu-link</a> 
 
      <ul class="sub-menu"> 
 
       <li><a href="#">sub-menu-link</a> 
 
       </li> 
 
       <li><a href="#">sub-menu-link</a> 
 
       </li> 
 
       <li><a href="#">sub-menu-link</a> 
 
       </li> 
 
       <li><a href="#">sub-menu-link</a> 
 
       </li> 
 
      </ul> 
 
      </li> 
 

 
      <li><a href="#">sub-menu-link</a> 
 
      </li> 
 
      <li><a href="#">sub-menu-link</a> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
     <li><a href="#">sub-menu-link</a> 
 
     </li> 
 
     <li><a href="#">sub-menu-link</a> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
    <li> 
 
    <a href="#">menu-link</a> 
 
    <ul class="sub-menu"> 
 
     <li><a href="#">sub-menu-link</a> 
 
     </li> 
 
     <li><a href="#">sub-menu-link</a> 
 
     </li> 
 
     <li><a href="#">sub-menu-link</a> 
 
     </li> 
 

 
    </ul> 
 
    </li> 
 
    <li> 
 
    <a href="#">menu-link</a> 
 
    <ul class="sub-menu"> 
 
     <li><a href="#">sub-menu-link</a> 
 
     </li> 
 
     <li><a href="#">sub-menu-link</a> 
 
     </li> 
 
     <li><a href="#">sub-menu-link</a> 
 
     </li> 
 
     <li><a href="#">sub-menu-link</a> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
    <li> 
 
    <a href="#">menu-link</a> 
 
    <ul class="sub-menu"> 
 
     <li><a href="#">sub-menu-link</a> 
 
     </li> 
 
     <li><a href="#">sub-menu-link</a> 
 
     </li> 
 
     <li><a href="#">sub-menu-link</a> 
 
     </li> 
 
     <li><a href="#">sub-menu-link</a> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
</ul>