Jump to content

Css Hover Menu Disappears


tinfanide
 Share

Recommended Posts

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><style>ul {padding: 0;margin: 0;}ul li {list-style: none;width: 100px;height: 20px;background: #FFCC00;float: left;}ul li ul li {list-style: none;width: 100px;height: 20px;display: none;background: #99FF00;}ul li:hover ul li {display: block;position: relative;}ul li:hover ul li ul li {display: none;}ul li:hover ul li:hover ul li {display: block;position: absolute;left: 100px;background: #3399FF;}</style></head><body><ul><li>Menu 1	 <ul>		    <li>subMenu 1			 <ul>				    <li>subsubMenu 1</li>				    <li>subsubMenu 2</li>		  </ul>		   		    </li>		    <li>subMenu 2</li>	    </ul>       </li><li>Menu 2  <ul>		    <li>subMenu 1</li>		    <li>subMenu 2</li>	    </ul>    </li><li>Menu 3</li></ul></body></html>

I wanna ask where subsubMenu 1 goes? It seems that it's disappeared.

Link to comment
Share on other sites

If you check out my post here, i said something about using ID & CLASS selectors, but it seems you did not listen. The most important thing in Css, is selectors (how to/what to access).
Well, I don't know why.Even I followed ya advice and give them a className specified, the key to showing up the disappeared subsubMenu 1 is to use position: relative. When absolute position is used, subsubMenu 1 disappeared.
Link to comment
Share on other sites

you are duplicating the same styling unnecessary, you only need to define position: relative and absolute once, :hover should only defined once in every specific selector.

<style type="text/css">#menu ul, #menu li {padding: 0;margin: 0;list-style: none;text-indent:0;} /*all levels li*/#menu  ul li {width: 100px;height: 20px;background: #FFCC00;float:left;position:relative; /*very very important!*/} /*sublevel 1 ul and below*/#menu ul ul{position: absolute; width:100px; left:0; /*very very important! will force ALL submenu ul to be POSiTION:ABSOLUTE relative to parent li which now has POSITION:RELATIVE positioning */}#menu ul ul li{width:100%;}#menu ul ul li:hover {background: #99FF00;}  /*sublevel 2 ul and below*/#menu ul ul ul {margin-left:100px; top:0px;}#menu ul ul ul li:hover {background: #3399FF;}  /* Right! using display:none and block should be only used for sublevel UL only, and :hover should be used only once within a selector, BUT	selectors can be grouped together using comma*/ /*set NORMAL state depending on hover of specific level */ #menu ul ul,#menu ul li:hover li ul, /*sublevel 1 ul*/#menu ul ul li:hover li ul  /*sublevel 2 ul*/{display:none;} /*set HOVER state depending on hover of specific level */ /*sublevel 1 ul*/#menu ul li:hover ul{display:block;} /*sublevel 2 ul*/#menu ul ul li:hover ul {display:block;} /*sublevel 3 ul*/#menu ul ul ul li:hover ul {display:block;} </style>

Edit: forgot Wrap menu in <div id="menu"> menu code </div> or it won't work.

Edited by dsonesuk
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...