创建下拉菜单 [英] Creating A Drop-down Menu

问题描述

我一直有问题。我不能得到一个下拉工作在所有，我已经尝试教程和其他各种来源在互联网上没有运气。所以我决定尝试看看是否有人可以帮助我。

I've been having a problem. I can't get a drop-down to work at all, I've tried tutorials and other various sources on the internet with no luck. So I've decided to try and see if someone can help me.

HTML：

<div class="nav-wrapper">
    <div class="nav">
        <div class="pilot-main-login">
            <img src="css/images/pilotloginicon.png">
        </div>
        <nav>
            <ul>
                <li>
                    <a href="index.php">Home</a>
                </li><li>
                    <a href="#">About</a>
                </li><li>
                    <a href="#">Operations</a>
                </li><li>
                    <a href="#">Pilot Application</a>
                </li><li>
                    <a href="#">VX Tracker</a>
                </li><li>
                    <a href="#">Contact Us</a>
                </li>
            </ul>
        </nav>
    </div>
</div>

CSS ：

.nav-wrapper{
    width:100%;
    height: 55px;
    background-color: #E20000;
    -webkit-box-shadow: 0px 0px 8px 2px #292827;
    -moz-box-shadow: 0px 0px 8px 2px #292827;
    box-shadow: 0px 0px 8px 2px #292827;
}

.nav{
    width: 960px;
    margin-left: auto;
    margin-right: auto;
    font-size: 16px;
    font-family: 'Ubuntu', sans-serif;
}

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

.nav li{
    line-height: 55px;
    text-align: center;
    display: inline-block;
}

.nav li a{
    color: #FFF;
    display: block;
    text-decoration: none;
}

.nav  a:hover{
    background-color: #D40000;
}

.nav a{
    padding-left: 30px;
    padding-right: 30px;
}

推荐答案

http://jsfiddle.net/39james/gDy5c/ =nofollow> fiddle

Check this fiddle out

使用您发布的HTML并将一个子菜单添加到操作列表项。当您在悬停时创建一个简单的下拉菜单时，使主菜单项 position：relavtive 。使子菜单项 ul 绝对位置并定位顶部， left ， right 和 bottom 您想在悬浮时显示的项目，并使用 display：none 隐藏subemnu项目 ul 。现在悬停，你可以使用 display：block 使子菜单项 ul 可见。

I have used the HTML you posted and added a submenu to "Operations" list item. When you are creating a simple drop-down on hover, make the main menu items position: relavtive. Make the submenu items ul absolute position and position properties like top, left, right and bottom to position the submenu items where you want to display when it is hovered and make the subemnu items ul hidden by using display:none. Now on hover you can make the the sub-menu items ul visible using display: block.

使用的HTML

<div class="nav-wrapper">
    <div class="nav">
        <div class="pilot-main-login">
            <img src="http://lorempixel.com/50/50" />
        </div>
        <nav>
            <ul>
                <li>
                    <a href="index.php">Home</a>
                </li><li>
                    <a href="#">About</a>
                </li><li>
                    <a href="#">Operations</a>
                <ul>
                    <li>Sub menu 1</li>
                    <li>Sub menu 2</li>
                    <li>Sub menu 3</li>
                </ul>
                </li><li>
                    <a href="#">Pilot Application</a>
                </li><li>
                    <a href="#">VX Tracker</a>
                </li><li>
                    <a href="#">Contact Us</a>
                </li>
            </ul>
        </nav>
    </div>
</div>

使用的CSS

.pilot-main-login{
    float:left;
}

.nav-wrapper{
    width:100%;
    height: 55px;
    background-color: #E20000;
    -webkit-box-shadow: 0px 0px 8px 2px #292827;
    -moz-box-shadow: 0px 0px 8px 2px #292827;
    box-shadow: 0px 0px 8px 2px #292827;
}

.nav{
    width: 960px;
    margin-left: auto;
    margin-right: auto;
    font-size: 16px;
    font-family: 'Ubuntu', sans-serif;
}

nav{
    float:left;
}

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

.nav li{
    line-height: 55px;
    text-align: center;
    display: inline-block;
    position:relative;
}

.nav li a{
    color: #FFF;
    display: block;
    text-decoration: none;
}

.nav  a:hover{
    background-color: #D40000;
}

.nav a{
    padding-left: 20px;
    padding-right: 20px;
}
// Styles for the sub menu item
.nav li > ul{
    display:none;
    position:absolute;
    top:100%;
    padding:0;
    background-color:yellow;
}
// To display submenu items on hover
.nav li:hover > ul{
    display:block;
}

希望这可能会有帮助。
如果你有子菜单的子菜单更好地命名使用类名的 ul 项。例如：

Hope this might help you. Also if you have sub menus for the sub menu better names the ul items using class names. For eg:

<li><a href="#">Operations</a>
    <ul class="sub-menu">
        <li>Sub menu 1</li>
        <li>Sub menu 2</li>
        <li><a>Sub menu 3</a>
            <ul class="sub-sub-menu">
               <li>Sub sub menu 1</li>
               <li>Sub sub menu 2</li>
            </ul
        </li>
    </ul>
</li>

这将帮助您根据需要对子菜单项进行样式设置。

This will help you style the sub menu items as you need.

这篇关于创建下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！