how to add sub menus on hover using CSS

Question

3.00/5 (1 vote)

See more:

below is my html code. how to add sub menu using css to this code

HTML

<div id="menu" class="container">
        <nav>
			<ul>
				<li class="current_page_item"><a href="#">Homepage</a></li>
				<li><a href="#">Manage internship</a>
             <ul>
				   <li><a href="#">Photoshop</a></li>
				   <li><a href="#">Illustrator</a></li>
				   <li><a href="#">Web Design</a></li>
			</ul>
                </li>
              

				<li><a href="#">Blog</a></li>
				<li><a href="#">Portfolio</a></li>
				<li><a href="#">Contact</a></li>
                <li><a href="#">Logout</a></li>
                <li><a href="../../Log_in.aspx">Login</a></li>

			</ul>
            </nav>
		</div>

Posted 25-Mar-14 20:06pm

jayraj86

Add a Solution

Comments

Sergey Alexandrovich Kryukov 26-Mar-14 2:39am

Do you mean "show sub-menu on hover"? If you added a sub-menu on each hover event, you would have way too many sub-menus. :-)
And what? Even without Javascript?
—SA

jayraj86 26-Mar-14 2:51am

YES "show sub-menu on hover". i want the same using CSS

Sergey Alexandrovich Kryukov 26-Mar-14 3:20am

Sure. Thank you.
—SA

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Sergey Alexandrovich Kryukov · Answer 1 · 2014-03-25T21:16:00

Thank you for your clarifications in the comments to the question. You could find a pure CSS solution if you just thought about it. The neat trick is the combination of the pseudo-class selector hover with the adjacent sibling selector ('+'). Suppose, for simplicity, you need to show/hide some div on hover. The idea is explained in the top answer to this question: http://stackoverflow.com/questions/5210033/show-div-on-hover-with-only-css[^].

Now, you need to show/hide not div, but something else, say, ul element of certain class. Let's say, you have the classes names "menu" and "submenu", then you need to combine the idea shown above with your HTML and that class. It could look something like:

CSS

ul.submenu {
    display: none;
}

il.menu:hover + ul.submenu {
    display: block;
}

Again, this is only the development of the same idea, but this should be enough for you to develop HTTP+CSS working together the way you want.

Further reading:
Suckerfish Dropdowns: http://alistapart.com/article/dropdowns[^],
The Adjacent-Sibling Selector: http://meyerweb.com/eric/articles/webrev/200007a.html[^].

—SA