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

回答1:

Check this fiddle out

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 used

<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 used

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

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.