Hello guys. Im building, half for fun, half to a work a css only dropdown menu. The question is i want in certain pages for the submenu to be visible. My question is , is it possible using only css, or do i need javascript. Im using this CSS: #nav {position: absolute; top:36px; right: 0px; z-index: 999;list-style: none;float:right;} #nav li.top {display:block; float:left;} #nav li a {display:block; float:left; height:22px; border:0; text-decoration:none; padding:0; cursorointer;} #nav li a b {margin-left:-999px;} #nav li a.company { background:url(../Images/menu/menu-company.jpg); width: 114px; margin-right: 26px;} #nav li a.collection { background:url(../Images/menu/menu-collection.jpg); width: 140px;margin-right: 26px;} #nav li a.contact { background:url(../Images/menu/menu-contact.jpg); width: 114px;margin-right: 26px;} #nav li a.news { background:url(../Images/menu/menu-news.jpg); width: 70px; margin-right: 26px;} #nav li:hover a, #nav a:hover {background-position: 0 0px;} #nav table {position:absolute; top:0; left:0; border-collapse:collapse; padding:0; width:0; height:0; margin:-1px;} #nav .sub {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none; } #nav li:hover {position:relative; z-index:200;} #nav a:hover {position:relative; white-space:normal; z-index:200;} #nav :hover ul.sub {left:0; top:22px; width:120px; height:auto; z-index:300;} #nav :hover ul.sub li {display:block; height:16px; position:relative; float:left; width:90px; font-weight:normal;} #nav :hover ul.sub li a {display:block; height:16px; width:90px; border:0; text-decoration:none; padding:0; cursorointer;} #nav :hover ul.sub li a b {position:absolute; left:-9999px; margin:0;} #nav :hover ul li a.history { background:url(../Images/menu/menu-company-history.jpg); } #nav :hover ul li a.product { background:url(../Images/menu/menu-company-product.jpg);} #nav :hover ul li a.shoes { background:url(../Images/menu/menu-collection-shoes.jpg);} #nav :hover ul li a.enterprise { background:url(../Images/menu/menu-contact-enterprise.jpg);} #nav :hover ul li a.stores {background:url(../Images/menu/menu-contact-stores.jpg);} #nav :hover ul li a.emailus {background:url(../Images/menu/menu-contact-emailus.jpg);} #nav :hover ul li a.press { background:url(../Images/menu/menu-news-press.jpg);} #nav :hover ul li a.events {background:url(../Images/menu/menu-news-events.jpg);} #nav :hover ul.sub li a:hover {background-position: 0px -14px; } #nav :hover ul.sub li a:hover b {left:100px; top:15px; background:#fff; color:#000; display:block; width:100px; height:20px; text-align:center; font-size:12px; line-height:18px;} And the html is : <ul id="nav" > <li class="top"><a href="#" class="company" ><!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="sub"> <li><a href="company-history-english.html" class="history"></a></li> <li><a href="company-product-english.html" class="product"></a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> Looks funny because of the IE exceptions but it works weel on Firefox, Opera, Ie7, ie6 is stil a problem. Any ideas for a visible sub menu?
I see you've been using Stu Nicholls' bastardized CSS dropdown menus here - don't use them since the hide invalid HTML inside conditional comments. Instead, you'd be better off using a .htc file. Now, just so we're perfectly clear on this, do you want the dropdowns to appear on certain pages only, or do you want the dropdown menu to work on every page?
Well, yes im using Stu's method, even though i have 3 options, using suckerfish, another with.htc file, and another based on mootols. the problem is that all the menu is made with images, and i had problems with all 3 methods. IE6 is a nightmare. The effect is this, a dropdown menu activated by :hover, but on specific pages the dropdown remains visible. For instance on the page collection/shoes, the dropdown of that categorie is visible. Im guessing only javascript does the trick?
Actually this would be best done with a server-side programming language so you can feed the dropdown part of the menu only to those pages that need it. Then you can just style them normally with CSS. As for your images problem, is it only the top-level that's composed of images, or is it the whole bloody thing?
Its the whole bloody thing!! Thats what you get when a graphic designer decides to be close minded. One of the ideas that i have is building a normal dropdown, with some help of suckerfish.js, and then use another script like hideshow.js to keep the dropdown visible on the active pages. Of course doing it in flash would be easy, but the consequences are not acceptable. Thanks for the help anyway.
You can actually visit the test website at http://www.mackjames.com/. Its only one of the 4 tests, but the only one i have online. The objective would be something like clicking on Company/history, and on that page the submenu to remain visible and history with that red background. These are all images. I have tried a javascript, and it works fine. the question is the not valid html of this version and the possible consequences.
Let me take a look at it in the morning - I'm about to crash for the night. Please PM me the link to this thread so I don't forget either (just to be on the safe side).
I might not be understandly you correctly, but couldn't you add a class (say "show") with display:block; and then have a class (say "hidden") which has display:none? Limitation of which is that if it was global (PHP included, use with a CMS) you wouldn't be able to change the classes around depending on the current pages (without a programming language, at least)
That he could, Matt. But I'd rather use absolute positioning mixed with a current page class. The current page class would have the dropdown visible at all times instead of when hovered over. (Oh, and all I saw was a Flash file.)
Yeah.. the flash was the designers idea..... you have a link in the bottom saying english, click there and you can enter the rest of the test site.