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

制作CSS 2子列下拉菜单

1 个答案: