tinfanide Posted November 3, 2011 Share Posted November 3, 2011 <!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 More sharing options...
eTianbun Posted November 3, 2011 Share Posted November 3, 2011 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). Link to comment Share on other sites More sharing options...
dsonesuk Posted November 3, 2011 Share Posted November 3, 2011 Its because you half to split your cursor into 2, then with one hover over the parent li, and with the other split cursor hover over the sublevel li, then it might work!. Link to comment Share on other sites More sharing options...
tinfanide Posted November 5, 2011 Author Share Posted November 5, 2011 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 More sharing options...
dsonesuk Posted November 5, 2011 Share Posted November 5, 2011 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. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.