繁体   English   中英

如何在下拉菜单中并排放置 li?

[英]How to put li side by side in drop down menu?

我试图让这个下拉菜单中的是并排的,而不是一个名单..但对我来说,做到这一点我不得不删除position:absolute#navigation > .nav-body > .menu > ul > li > .drop-ul仍然不行,因为它弄乱了所有代码..我怎样才能并排? 我会尝试 jQuery 但不知道如何。

<section id="navigation">
<div class="nav-body">  
    <section class="menu">
        <ul>
            <li>
                <a href="/"><span class="icon"></span>home</a>
            </li>
            <li>
                <a href="/"><span class="icon"></span>second</a>
                <ul class="drop-ul">
                    <a href="/guide-keto-diet">
                        <li>
                            sub 1
                        </li>
                    </a>
                    <a href="/">
                        <li>
                            sub 2
                        </li>
                    </a>
                    <a href="/">
                        <li>
                            sub 3
                        </li>
                    </a>
                    <a href="/">
                        <li>
                            sub 4
                        </li>
                    </a>
                    <a href="/">
                        <li>
                            sub 5
                        </li>
                    </a>
                </ul>
            </li>
            <li><a href="/"><span class="icon"></span>cat 1</a></li>
        </ul>
    </section>
</div>

我最近为一个网站构建了一个纯 CSS 下拉菜单。 它的结构与你的相似。 列表项 ( li ) 并排排列。 代码已通过验证,没有错误或警告。

HTML

<nav id="main-nav">
<ul>
    <li><a href="#">Menu 1</a></li>
    <li><a href="#">Menu 2</a>
        <ul class="main-nav-sub">
        <li><a href="#">Menu 2.1</a></li>
        <li><a href="#">Menu 2.2</a></li>
        <li><a href="#">Menu 2.3</a></li>
        <li><a href="#">Menu 2.4</a></li>
        <li><a href="#">Menu 2.5</a></li>
        </ul>
    </li>
    <li><a href="#">Menu 3</a>
        <ul class="main-nav-sub">
        <li><a href="#">Menu 3.1</a></li>
        <li><a href="#">Menu 3.2</a></li>
        <li><a href="#">Menu 3.3</a></li>
        </ul>
    </li>   
    <li><a href="#">Menu 4</a></li>
    <li><a href="#">Menu 5</a>
        <ul class="main-nav-sub">
        <li><a href="#">Menu 5.1</a></li>
        <li><a href="#">Menu 5.2</a></li>
        <li><a href="#">Menu 5.3</a></li>
        <li><a href="#">Menu 5.4</a></li>
        </ul>
    </li>
</ul>
</nav>

CSS

#main-nav > ul {
    list-style-type: none;
    padding: 0;
    border: 1px solid #999;
    position: absolute;
}

#main-nav > ul  > li {
    float: left;
    background-color: #000;
}

.main-nav-sub {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

#main-nav > ul  > li+li {
    border-left: 1px solid #999;
}

.main-nav-sub > li  {
    border-bottom: 1px solid #999;
    border-right: 1px solid #999;
    border-left: 1px solid #999;
    background-color: #000;
}

.main-nav-sub > li:first-child {
    border-top: 1px solid #999;
}

#main-nav > ul > li > a,
.main-nav-sub > li > a {
    text-decoration: none;
    white-space: nowrap;
    display: block;
    color: #fff;
    font-family: verdana, sans-serif;
    font-size: .8em;
    font-weight: bold;
    padding: 10px 20px;
}

#main-nav > ul > li:hover > a {
    color: #000;
    background-color: #fff;
}

.main-nav-sub > li:hover > a {
    color: #000;
    background-color: #fff;
}

.main-nav-sub {
    position: absolute;
    z-index: -999;
    opacity: 0;
        filter: alpha(opacity=0); /* IE older versions */
        zoom: 1;  /* IE older versions */
}

#main-nav > ul > li:hover > .main-nav-sub {
    z-index: 100;
    opacity: 1;
        filter: alpha(opacity=100); /* IE older versions */
        zoom: 1;  /* IE older versions */

    -webkit-transition: all .5s ease-in;
    -moz-transition: all .5s ease-in;
    -ms-transition: all .5s ease-in;
    -o-transition: all .5s ease-in;
    transition: all .5s ease-in;
}

演示: http : //jsfiddle.net/x9upvtp0/

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM