Yes another thread on it! If you load up this code you will see a sub menu under Capabilities. It opens up with a 15px indent to make the sub menu stand out. However this makes the sub menu overlap the whole menu width. Can anyone show me how to fix it? <!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 type="text/css"> <!-- body { font: normal 11px verdana; } #pmenu, #pmenu ul {padding:0; margin:0; list-style-type: none; } #pmenu {margin: 0;} #pmenu li {float:left; position:relative;} #pmenu a, #pmenu a:visited {display:block; font-size:11px; color:#777; padding-top: 9px; padding-bottom:9px; padding-left:5px; text-decoration:none; text-indent:5px; background:#fff; border:1px solid #ccc; border-width:0 0px 1px 0; width:170px;} #pmenu li:hover > a {background:#f1f1f1; color:#5d245a; } #pmenu li ul {display: none; } #pmenu li:hover > ul {display:block; position:relative; top:0; left:101px; } #pmenu > li:hover > ul {left:0px; top:0px; margin-left:15px; } --> </style> </head> <body> <div style="width:185px;"> <ul id="pmenu"> <li>home</li> <li><a href="capabilities.html">Capabilities</a> <ul> <li><a href="definition.html">Definition</a></li> <li><a href="procurement.html">Procurement</a></li> <li><a href="fielding.html">Fielding</a></li> <li><a href="sustainment.html">Through Life Sustainment</a></li> </ul> </li> <li><a href="customers.html">Customers & Partners</a></li> </ul> </div> </body> </html> HTML:
Hi Is this what your after? <!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 type="text/css"> <!-- body { font: normal 11px verdana; } #pmenu, #pmenu ul {padding:0; margin:0; list-style-type: none; } #pmenu {margin: 0;} #pmenu li {float:left; position:relative;} #pmenu a, #pmenu a:visited {display:block; font-size:11px; color:#777; padding-top: 9px; padding-bottom:9px; padding-left:5px; text-decoration:none; text-indent:5px; background:#fff; border:1px solid #ccc; border-width:0 0px 1px 0; width:170px;} #pmenu li:hover > a {background:#f1f1f1; color:#5d245a; } #pmenu li ul {display: none; } #pmenu li:hover > ul {display:block; position:relative; top:0; left:101px; } #pmenu > li:hover > ul {left:0px; top:0px; } #pmenu > li:hover > ul > li > a { padding-left:15px; color: red; width:160px;} --> </style> </head> <body> <div style="width:185px;"> <ul id="pmenu"> <li>home</li> <li><a href="capabilities.html">Capabilities</a> <ul> <li><a href="definition.html">Definition</a></li> <li><a href="procurement.html">Procurement</a></li> <li><a href="fielding.html">Fielding</a></li> <li><a href="sustainment.html">Through Life Sustainment</a></li> </ul> </li> <li><a href="customers.html">Customers & Partners</a></li> </ul> </div> </body> </html> Code (markup): Is it? I think the above code will struggle to render correctly in IE 6 as CSS child selectors aren't supported .... one problem at a time gG
Hmmm, you could probably use the method we use to keep a link highlighted... setting a class or id on thge body, making every page unique, and then stating in the CSS that on #thisbodypage, #suchandsuchasubmenu is display: block; instead of defaulting to display: none until the mouse appears... here, simply by being on the page with the body with the id/class of "whatever" will be enough to keep that submenu open. The particular submenu would also need a name (class or id) that set it apart from the other submenus. although display: none/display: block is a dangerous method of showing and hiding stuff if you may ever have the blind in your audience, because the screen readers seem to obey display: none (even though they shouldn't) and don't say the menu out loud.
Thanks. I guess in this instance it would be best to just add the submenu into the page by hand as it is not a large website.
Now this is doing my head in! This is the page code: <div> <ul id="pmenu"> <li><a href="#" title="Back to the homepage">Home</a> </li> <li><a href="capabilities.html" title="Our capabilities">Capabilities</a> <ul class="open"> <li><a href="definition.html">Definition</a></li> <li><a href="procurement.html">Procurement</a></li> <li><a href="fielding.html">Fielding</a></li> <li><a href="sustainment.html">Through Life Sustainment</a></li> </ul> </li> <li><a href="customers.html" title="Our customers and partners">Customers and Partners</a></li> <li><a href="about.html">About Us</a></li> <li><a href="contact.html">Contact Us</a></li> <li><a href="recruitment.html" title="Recruitment opportunities">Recruitment</a></li> </ul> </div> HTML: and this is the css that should keep it open: .open {display:block; text-indent:15px; color: black; width:160px; left:0px; top:0px; } HTML: Doesn't make any difference though! Please help
Is ".open" more specific than what you're using to keep the regular subs hidden? No. Look at what you've got: #pmenu li ul {display: none; } An ID (which is worth the most when a browser is trying to figure out which CSS rule to follow), then two elements! That'll override your .open any day. Try... #pmenu li ul.open instead.
ok now you got me really confused! I am trying to move to css from tables but it's a bit of a culture shock! Just started reading the HTML DOG book though. Anyway, are you saying I need both #pmenu li ul {display: none; } #pmenu li ul.open {display: block; } Neither seems to work for me. It keeps it open but does not have the style attached as in: #pmenu > li:hover > ul > li > a { padding-left:15px; color: black; width:160px;} Sorry to be dumb but would appreciate some help
You didn't need to restrict yourself to the display declaration, I just only used it because I was focussed on the names of the elements. You can still have #pmenu li ul.open { display: block;} #pmenu li ul.open a {padding-left:15px; color: black; width:160px;} if you want. Yeah um... CSS has this Cascade thing and what's confusing about it is there's like three different factors that influence it, and I'm sure i can only remember two of them : ) The order that stuff is typed has an influence. All things being equal, the last-typed thing has precedence. a { color: #000; } later.. a { color: #fff; } The last one is what you'd see. Second thing is specificity. The more specific you are (only the a's in THIS container), the more chance it has of showing up. a { color: #000; } ul a { color: #f60; } All the a's on your page will stay black (#000) except the a's in the menu because here we've listed a parent and an element. a { color: #000; } #funkymenu a { color: #fff; } ul a { color: #f60; } Here, all a's on the page are black (#000) except the a's inside menus are orange (#f60)... except a's inside the menu (or whatever it is) with the id of #funkymenu, which are white (#fff). #funkymenu even overrides the ul a declaration below it because the fact that #funkymenu has an ID makes it even MORE specific than ul a. ID's count more than just named parents, and classes count more than just named parents but not more than id's... there's a whole list out there of who gets how many points and who wins out in specificity, somewhere... Yeah I didn't add all your css cause I was concentrating on the name of the element to use... although, if you had just a normal style set for all sub menus then your .open one would simply inherit them as well (with a few exceptions with IE6 cause it's strange like that). So like if there'd been a #pmenu li ul a {styles;} somewhere, then all a's inside sub ul's wouls just have them. They can be styled and off-screen too, I do it with my Suckerfishes. You are making your styles only appear when the main list is hovered (slightly more specific, as li:hover is more specific than li, and you used the > which I don't cause IE6 doesn't understand it). Which looks the same on the browser, there's always more than one way to do things. But if you want to be a lazy web coder like me, you try to see how to get the most elements to obey with the least amount of code. Only list stuff under :hover that you need to change from the default. As I understand it, the only change your sub ul's do is show up. Then there might be another change of the a's when they are individually hovered too, but start with a default first, then only change what absolutley must be changed. Usually less code. > is a direct descendent. You don't always need that, in fact you don't usually want it. Esp if you had a menu where all the parts, the mains and the subs, acted and looked the same. I only use it on my menu's to keep the tops highlighted when the mouse moves on down to the subs.
Many thanks for taking the time to reply in such length. The code you suggested worked fine but I see I have much to learn still Rep given
Maybe you want to start with a simpler menu? Just to get menus straight in your head? Don't let menus get in your way-- they ARE easily the most complicated part of a webpage.
Good idea - I'll make one from scratch sometime. I got that menu from a css resource site (can't recall which one though).
For Dropdowns I like Sons of Suckerfish-- but they have an IE7 flaw. You fix it by giving a trigger to IE7 for the li:hover (which IE considers a separate element or something): (in it's own declaration, not mixed with anything else) #menu li:hover { position: relative; z-index: 1; (the z-index is for good luck, you don't need it for a menu with only a level or two dropping down) }