tinfanide Posted November 13, 2011 Share Posted November 13, 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>div#menuBackground {width: 100%;height: 40px;position: relative;left: 0;background: #330000;z-index: 9999;}div#menu ul {margin: 0 auto;width: 1280px;height: 40px;line-height: 40px;background: #330000;}div#menu li {list-style: none;float: right;position: relative;}div#menu ul li a {text-align: center;height: 40px;width: 200px;display: block;color: #FFFFFF;text-decoration: none;text-shadow: 1px 1px 1px #000;}div#menu ul ul {display: none;position: absolute;width: auto;height: auto;top: 40px;left: 0;}div#menu ul ul li {float: none;}div#menu ul li:hover ul {display: block;} div#menu ul ul ul {width: auto;height: auto;position: absolute;left: 200px;top: 0;display: none; // not working} div#menu ul li ul li:hover ul {display: block; // not working} div#menu ul ul ul li {float: none;background: #330000;} div#menu ul li ul li ul li a {width: 200px;height: 40px;}</style></head><body><div id="menuBackground"><div id="menu"><ul> <li><a href="#">Menu</a> <ul> <li><a href="javascript: lightboxPage('SubMenu.html','_blank',1)">SubMenu</a></li> <li><a href="#">SubMenu</a> <ul> <li><a href=".pdf">Sample 1</a></li> <li><a href=".pdf">Sample 2</a></li> <li><a href=".pdf">Sample 3</a></li> <li><a href=".pdf">Sample 4</a></li> </ul> </li> </ul> </li></ul></div></div></body> Please have a look at the css sheet // not workingI could not figure out why display none is not workingto the best of my limited CSS knowledgeSo, please help! Thanks. Link to comment Share on other sites More sharing options...
dsonesuk Posted November 13, 2011 Share Posted November 13, 2011 If you followed detailed instructions from previous post in http://w3schools.invisionzone.com/index.php?showtopic=40523&hl=&fromsearch=1 you maybe won't be having this problem. Link to comment Share on other sites More sharing options...
tinfanide Posted November 13, 2011 Author Share Posted November 13, 2011 Thank you for your reminder. Yes, I figured it out most of it...But can ya explain a bit: #menu ul li:hover li ul Why is li ul instead of ul li? Link to comment Share on other sites More sharing options...
dsonesuk Posted November 13, 2011 Share Posted November 13, 2011 What as in #menu ul ul,#menu ul li:hover li ul, /*sublevel 1 ul*/#menu ul ul li:hover li ul /*sublevel 2 ul*/{display:none;} Because you have to target all ul below and including 2nd sublevel ul to hide it, and only show 1st sublevel ul, when its parent li is hovered over, and only show sublevel 2 when its parent li is hovered over#menu ul li:hover li ul<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></ul>The important part of this selector is the end target ul because#menu ul li:hover li ul can also be wrtten as#menu ul li:hover ul ul <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></ul>As you can see the target ul matches the colour blue If you used#menu ul li:hover ul liIt would target the 1st sublevel ul individual li elements, meaning you would see only the parent level, and none of the sublevels.<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></ul> Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.