create submenu with css

Question

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

There are plenty of tutorials out there, for example: line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu — Diodeus - James MacFarlane
– Diodeus - James MacFarlane, Commented Mar 14, 2013 at 20:18
this is a very well documented topic around the web... You can try some tools (cssmenumaker.com), tutorials, (noupe.com/css/100-great-css-menu-tutorials.html), etc — Agustin Meriles
– Agustin Meriles, Commented Mar 14, 2013 at 20:20

Michael · Accepted Answer · 2013-03-14 20:44:12Z

6

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/

edited Mar 14, 2013 at 20:44

answered Mar 14, 2013 at 20:20

Michael

7,1022 gold badges31 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Michael Over a year ago

I apologize, I made an error by reading your code incorrectly. (its been a long day). Your HTML also isn't quite right, see my edit above for details.

user2171512 Over a year ago

Tnx about the correction above, but when i make your changes in my css, my header changes his size.How to make that submenu look like real dropdown submenu in box with borders, and the header to stay normal.I will pass my css code up in the post

user2171512 Over a year ago

here is my css jsfiddle.net/miki9999/gcpPa. I saw your link about submenus and i try to put code from this in my css , but it was different. cssmenumaker.com/menu/black-css3-drop-down-menu

Collectives™ on Stack Overflow

create submenu with css

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related