create submenu with css

问题

Can someone help me. I have this html code and i want to design my submenus with css, but i am new in this and i really need a help

<div class="nav-collapse collapse">
            <ul id="nav-list" class="nav pull-right">
                <li><a href="#home">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#updates">Updates</a></li>
                <li><a href="#screenshots">Screenshots</a></li>
                <li><a href="#howto">How to</a></li>
                    <ul>
                    <li><a href="#">Sub Item 1.1</a></li>
                    <li><a href="#">Sub Item 1.2</a></li>
                    </ul>
                <li><a href="#permissions">Permissions</a></li>
                <li><a href="#download">Download</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </div>

I want to have dropdown list for my submenus.My menu is horizontal at the moment

回答1:

To get you started...

.nav li ul { display: none; }

.nav li:hover ul { display: block;}

Your HTML needs a minor edit also... You need to nest the sub-menu <ul> inside the parent <li>. Like below:

<li><a href="#howto">How to</a>
    <ul>
        <li><a href="#">Sub Item 1.1</a></li>
        <li><a href="#">Sub Item 1.2</a></li>
    </ul>
</li>

Here is a jsfiddle demonstrating this working, obviously it is not horizontal as I lack the styles you already made, the functionality still works however when you hover the mouse over "How To":

http://jsfiddle.net/Zuvdf/

来源：https://stackoverflow.com/questions/15419345/create-submenu-with-css