使CSS 2兒童列下拉菜單

Question

如何使用此代碼製作2個子列？謝謝。

<li class="nav-submenu-item"><a href="?=submenu-1">Submenu item 1</a></li> 

。

 <nav class="nav"> 
     <ul class="nav-list"> 
      <li class="nav-item"><a href="?=home">Home</a> 
       <ul class="nav-submenu"> 
        <li class="nav-submenu-item"><a href="?=submenu-1">Submenu item 1</a></li> 
        <li class="nav-submenu-item"><a href="?=submenu-2">Submenu item 2</a></li> 
        <li class="nav-submenu-item"><a href="?=submenu-3">Submenu item 3</a></li> 
        <li class="nav-submenu-item"><a href="?=submenu-4">Submenu item 4</a></li> 
       </ul> 
      </li> 
      <li class="nav-item"><a href="?=about">About</a></li> 
      <li class="nav-item"><a href="?=home">Services</a> 
       <ul class="nav-submenu"> 
        <li class="nav-submenu-item"><a href="?=submenu-1">Submenu item 1</a></li> 
        <li class="nav-submenu-item"><a href="?=submenu-2">Submenu item 2</a></li> 
        <li class="nav-submenu-item"><a href="?=submenu-3">Submenu item 3</a></li> 
        <li class="nav-submenu-item"><a href="?=submenu-4">Submenu item 4</a></li> 
       </ul> 
      </li> 
      <li class="nav-item"><a href="?=portfolio">Portfolio</a></li> 
      <li class="nav-item"><a href="?=testimonials">Testimonials</a></li> 
      <li class="nav-item"><a href="?=contact">Contact</a></li> 
     </ul> 
    </nav> 

。

.nav { 
    position: absolute; 
    display: inline-block; 
    font-size: 14px; 
    font-weight: 900; 
    z-index: 10; 
    right: 0; 
    top: 0; 
} 
.nav-list { 
    text-align: left; 
} 
.nav-item { 
    float: left; 
    display: inline; 
    zoom: 1; 
    position: relative; 
} 
.nav-item a { 
    display: block; 
    color: #FFF; 
    padding: 15px 20px; 
    background: #7A1E61; 
    border-bottom:1px solid # 8B2870; 
} 
.nav-item > a: hover { 
    background: #822368; 
} 
.nav-item:hover .nav-submenu { 
    display:block; 
} 
/* Navigation submenu */ 
.nav-submenu { 
    display:none; 
    position:absolute; 
    left:0; 
    width:180px; 
} 
.nav-submenu-item a { 
    background:# 8B2770; 
    border-bottom: 1px solid #9A337E; 
    display:block; 
    padding:15px; 
} 
.nav-submenu-item a:hover { 
    background:# 932C77; 
} 

看到JSFIDDLE

@media only screen and (min-width: 320px) and (max-width: 768px) { 
.nav-mobile { 
    display:block; 
} 
.nav { 
    width:100%; 
    padding:50px 0 0; 
} 
.nav-list { 
    display:none; 
} 
.nav-item { 
    width:100%; 
    float:none; 
} 
.nav-item > a { 
    padding:15px; 
} 
.nav-click { 
    display:block; 
} 
.nav-mobile-open { 
    border-radius:5px 5px 0 0; 
    -webkit-border-radius:5px 5px 0 0; 
    -moz-border-radius:5px 5px 0 0; 
} 
.nav-item:hover .nav-submenu { 
    display:none; 
} 
.nav-submenu { 
    position:static; 
    width:100%; 
} 
} 

Answer 1

您可以通過浮動的列表項得到一個簡單的兩個欄佈局。

您還需要從ul中刪除默認樣式。

http://jsfiddle.net/AE87p/6/

.nav-submenu > li { 
    width: 150px; 
    float: left; 
} 

.nav-submenu { 
    /*other styles...*/ 
    width: 360px 
    padding:0; 
    margin:0; 
    list-style-type: none; 
}