CSS - Css Menu - Suckerfish - Styling Issues
Hi there,
I'm playing around with a menu that is based on the 'suckerfish' method and basically, I am trying to change the background colour of one of the menu options. The problem is, I can't seem to do this in isolation - i.e. without messing up the other items in the menu. I've tried applying a background image to the <li> item, with no joy and I've also tried creating a separate div layer for this one option - again with no joy. **EDIT** Just worked out how to do this.... All I did was add [CODE]id="selected" Similar TutorialsI've messed with this for a couple days now. I can't seem to get it to do what I need it to. Any help would be much appreciated I need to add a 3rd column to the menu My code between the body and /body tags I marked the place I need the 3rd column with: *** ( Need to add a 3rd column for the filters ) *** Code: <ul id="nav"> <li><a href="#">Home</a> </li> <li><a href="#">Maps</a> </li> <li><a href="history.php">History</a> </li> <li><a href="#">Contractors We Recommend</a> </li> <li><a href="#">Products We Recommend</a> <ul> <li><a href="#">Pool Accessories</a> <ul> <li><a href="#">Pool Accessories</a></li> <li><a href="#">Pool Accessories</a></li> <li><a href="#">Pool Accessories</a></li> <li><a href="#">Pool Accessories</a></li> <li><a href="#">Pool Accessories</a></li> </ul> </li> <li><a href="#">Pool Chemicals</a> <ul> <li><a href="#">Pool Chemicals</a></li> <li><a href="#">Pool Chemicals</a></li> <li><a href="#">Pool Chemicals</a></li> <li><a href="#">Pool Chemicals</a></li> <li><a href="#">Pool Chemicals</a></li> </ul> </li> <li><a href="#">Pool Filters</a> <ul> <li><a href="#">Pool Filters</a></li> <li><a href="#">Pool Filters</a></li> <li><a href="#">Pool Filters</a></li> <li><a href="#">Pool Filters</a></li> <li><a href="#">Pool Filters</a></li> </ul> </li> *** ( Need to add a 3rd column for the filters ) *** <li><a href="#">Pool Heaters</a> <ul> <li><a href="#">Hayward</a></li> <li><a href="#">Pentair</a></li> <li><a href="#">Sta-Rite</a></li> </ul> </li> <li><a href="#">Pool Motors</a> <ul> <li><a href="#">Pool Motors</a></li> </ul> </li> <li><a href="#">Pool Sweeps</a> <ul> <li><a href="#">Hayward</a></li> <li><a href="#">Pentair</a></li> <li><a href="#">Sta-Rite</a></li> </ul> </li> <div id="content"> </div> Thanks for any help! Hi, q1)I can't move the menu to the right without problems as i set a margin on #headlinks2 and the links get cluttered? Code: #headlinks2 { height:25px; } #headlinks2 a { color:green; display: block; text-decoration:none; width: 100px; font-size:13pt; padding-right:5px; //margin-left:205px; } #headlinks2 a:hover { color: white; } #headlinks2, #headlinks2 ul { padding: 0; margin: 0; list-style: none; } #headlinks2 li { float: left; width: 100px; } #headlinks2 li ul { position: absolute; width: 100px; left: -999em; } #headlinks2 li:hover ul { left: auto; } #headlinks2 li:hover ul, #headlinks2 li.sfhover ul { left: auto; } </style> <script type="text/javascript"> sfHover = function() { var sfEls = document.getElementById("nav").getElementsByTagName("LI"); for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover=function() { this.className+=" sfhover"; } sfEls[i].onmouseout=function() { this.className=this.className.replace(new RegExp(" sfhover\\b"), ""); } } } if (window.attachEvent) window.attachEvent("onload", sfHover); </script> //html <div id="headlinks2"> <li><a href="#">Percoidei</a> <ul> <li><a href="#">Remoras</a></li> <li><a href="#">Tilefishes</a></li> <li><a href="#">Bluefishes</a></li> </ul> </li> <li><a href="#">Anabant</a> <ul> <li><a href="#">Climbing perches</a></li> <li><a href="#">Labyrinthfishes</a></li> <li><a href="#">mex</a></li> </ul> </li> <li><a href="#">Percoidei</a> <ul> <li><a href="#">Remoras</a></li> <li><a href="#">Tilefishes</a></li> <li><a href="#">Bluefishes</a></li> </ul> </li> <li><a href="#">Anabant</a> <ul> <li><a href="#">Climbing perches</a></li> <li><a href="#">Labyrinthfishes</a></li> <li><a href="#">mex</a></li> </ul> </li> <li><a href="#">Percoidei</a> <ul> <li><a href="#">Remoras</a></li> <li><a href="#">Tilefishes</a></li> <li><a href="#">Bluefishes</a></li> </ul> </li> <!-- etc. --> </div> So I tried this popular drop-down menu technique and is all good except that the second-level menu links line up beside the top-level headers in IE6 instead of, well, dropping down (which thankfully does happen in FF). This would be very confusing for visitors trying to navigate! I have seen this problem described on forums and blogs but not found a solution. The example page at HTML Dog displays properly in IE6, which offers no insights . . . See the page in question: hire.karenjeane.com/web/site2.php Thanks for any help! I was working on a menu following the suckerfish tutorial at Alist Apart and I've got it working in FF but not IE6. Big surprise. There's 2 issues with IE 6: 1. The menu is sitting lower in IE than in FF. 2. The dropdowns aren't working in IE at all. I've applied the js hack and it's still not working. I can't find what I'm missing but I know it's there somewhere. Here's the url: menu Please help. Thanks. Brad Hi I hope this is going to be a simple question!! I have used the suckerfish menu and all I would like to do is have the menu in the center of the page with a blue border extending from the sides of the menu to the edge of the page. The page can be viewed on http://uk.geocities.com/g_foxon/example1.htm cheers Wistar Dear clever CSSers I am currently changing my flyout menu from something rather complex, to the Suckerfish version. I have one problem: I have been using some mouseover tooltip-like information boxes giving extra details of the contents of a link, by having a div within the text of the hyperlink, to come visible when hovered. It has worked very well in my old version. Here's my test page In the new version, there are two lines of CSS allowing the popup to open, which is also enclosed in a balloon-style info graphic, actually in two halves so that it can open like a clamshell if there is extra text in there, or a user has a larger than normal font setting: Code: #nav a span {visibility:hidden;position:absolute;top:-120px;left:175px;background: url(http://www.internetevangelismday.com/images/balloontop.png) no-repeat transparent top left;width:196px;height:105px;line-height:1.2em;text-align:left;word-wrap:break-word;text-wrap:normal;white-space:normal;padding:0px;} #nav a:hover span {visibility:visible;z-index:9999;min-height:130px;} This CSS does allow the popup to appear, but unfortunately it positions each popup at the same position on the page. I would prefer it that they appeared with the 'point' of the balloon pointing at the relavent link. You can see that if you hover '2nd level here', and then 'page 1', or 'page 2' or 'another page', the info balloon appears in exactly the same place on the page. Changing the positioning from position absolute to position relative causes the popup to appear in about the correct position, but it also expands the link area on the menu itself to a huge blank area and misses off the balloontop.png graphic from the popup, which I presume is staying inserted, hidden, within the menu item and causing it to expand. Thanks for any ideas on this. BTW, the javascript is a neat one that repositions submenus where necessary so they can't vanish below the bottom of the page. Best wishes Tony Good Evening, Am very glad to find this board. Am working on my first paid Joomla site - and the Suckerfish menu's do not seem to center, and I cannot find any directions on how to go about making them so. Also, many sites I've visited will scale to the size of the window open (until too small) - am using the JNS Epic Pro Template and was wondering if there was any CSS feature to program the whole site to scale as best possible. Hope this makes sense. Am not new to computers, but rather a newbie to Joomla and CSS (although I do know a little). If any further info is required, please just advise. Thanking you in advance ... going live on 7/1 ... hey guys, im not the greatest with css and html but i do it for fun to try and teach myself. Anyways I have a css drop menu set up on my site and I am having a problem with the width sizes in the actual drop down. The text length is of various sizes in the drop down. (some are long single words, some are 2 words etc) and I am using a width size of 11em which in all browsers using a standard screen res shows up fine. but if somebody uses a smaller screen res the text starts wrapping. Where you get the 2 word lines split into 2 lines. and then If i increase the size sometimes I get separate <li>'s on the same line. Its pretty frustrating. What I want to do is be able to increase the width size of the drop menu and even have all kinds of extra padding on the right if I want but without <li>'s spilling onto the next line or without <li>'s sitting on the same line cause its too big. Here is my CSS for the drop. Code: #nav li ul { background: #FCDFFF; background-image: url('images/background.png'); border-style: ridge; border-width: 5px; border-color: #000000; margin-top: 0px; position: absolute; font-size: 95%; width: 11em; left: -999em; line-height: 2; z-index: 999; } anybody know how I can do what Im looking for? Thanks in advance! So I'm a student working on my first real project. I've done Suckerfish drop-downs before, but I'm having trouble doing them with graphic text instead of system text. The image replacement works fine on the first level, but the nested li's just repeat the image of the main li. For example, the main nav item with the drop-down is "Our Coffee". In the drop-down menu instead of having the different images for the corresponding links, "Our Coffee" is repeated. Here's a selection of my code where I think the problem is happening: Code: <div id="nav"> <ul id="dd"> <li id="hm"><a href="menu.html">Menu</a></li> <li id="au"><a href="about_us.html">About Us</a></li> <li id="oc"><a href="#">Our Coffee</a> <ul> <li id="oc_dd_ko"><a href="oc_kona.html">Kona</a></li> <li id="oc_dd_ma"><a href="oc_maui.html">Maui</a></li> <li id="oc_dd_ka"><a href="oc_kauai.html">Kauai</a></li> </ul> </li> <li id="os"><a href="os_hy.html">Our Stores</a></li> <li id="ols"><a href="online_store.html">Online Store</a></li> <li id="oct"><a href="our_culture.html">Our Culture</a></li> </ul> </div> Code: #nav ul li ul li a { display: block; height: 0px; overflow: hidden; } #dd li#oc a { display: block; width: 95px; } #dd li#oc { float: left; width: 95px; } #dd li#oc ul { position: absolute; width: 95px; left: -9999px; } #dd li#oc:hover ul { left: auto; } #dd li#oc:hover ul, #dd li.sfhover ul { left: auto; } li#oc ul li a { height: 0px; display: block; overflow: hidden; } #oc_dd_ko a { background: url(../images/oc_ddnav-01_lo.gif) no-repeat; padding-top: 13px; width: 58px; } #oc_dd_ko a:hover { background: url(../images/oc_ddnav-01_hi.gif) no-repeat; padding-top: 13px; width: 58px; } #oc_dd_ma a { background: url(../images/oc_ddnav-02_lo.gif) no-repeat; padding-top: 15px; width: 58px; } #oc_dd_ma a:hover { background: url(../images/oc_ddnav-02_hi.gif) no-repeat; padding-top: 15px; width: 58px; } #oc_dd_ka a { background: url(../images/oc_ddnav-03_lo.gif) no-repeat; padding-top: 16px; width: 58px; } #oc_dd_ka a:hover { background: url(../images/oc_ddnav-03_hi.gif) no-repeat; padding-top: 16px; width: 58px; } #dd, #dd ul { padding: 0; margin: 0; list-style: none; } Any suggestions would be appreciated. Hi I am using suckerfish drop down menu without problem on my local server, however, on the remote server them menu won't work when jscript is turned off (when viewed on IE). Do you have any idea why this might be? has anyone had this problem before? (here is the url: (URL address blocked: See forum rules)) thanks a lot I've been hit with a problem that I think isn't possible, but I'm hoping that someone else here might be able to offer some sort of solution. It's a bit complicated to explain, so I'll try and give as much detail as I can. I have a menu system set up on a site, and it's styled correctly for the way that one section works. It's a standard unordered list. FIRST MENU: Code: <ul> <li> <a href="page1.html">Link 1</a> <ul> <li><a href="page1.1.html">Link 1.1</a></li> <li><a href="page1.2.html">Link 1.2</a></li> </ul> </li> <li> <a href="page2.html">Link 2</a> <ul> <li><a href="page2.1.html">Link 2.1</a></li> </ul> </li> </ul> SECOND MENU: Code: <ul> <li> <a href="page1.html">Link 1</a> </li> <li> <a href="page2.html">Link 2</a> </li> </ul> My problem is that I also need to style another menu match this - but the second menu has to have it's first-level links look like the second-level links in the first menu. This wouldn't be a problem normally as I'd be able to use different selectors, ID's or something else, but with this system, the menu is output from a closed function that I can't change. There's no ID's on the lists, and the classes are all the same. I can't change this, and I can't change the system to add anything else around each list to give it a better identifier. This means that both menus use the same CSS. The only way that I can see that I can do this is to set up a CSS rule that styles the list item either only of it contains another<ul> item, or if it doesn't contain another <ul> item. As far as I know that's not possible to do. Does anyone out there have an idea of where I can start with this? I have a css list menu which uses background images in place of bullets. What I'd like is for the user to visit the 'about' page and have the 'about' links background image be different from the rest. So the user can see from looking at the menu, what page they are on. Anyone able to suggest any methods of doing this? Would be appreciated =D Hello everyone! I would like to integrate a very simple purely css-based dropdown menu into my website. My knowledge of css is very basic, so I adapted a free sample menu, boiled it down (mostly through trial and error) to my very specific idea of what it should look like and finally ran into a problem which I could not solve myself so far. The following code represents "my" current code, with placeholder colors, text, links etc.: Code: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Menu</title> <style type="text/css"> /* background */ body { background-color: #252525;} /* targeted dropdown button style */ .dd-select {font: 10.5px Verdana; text-transform: uppercase;} .dd-select a:link {color: #ff0000; text-decoration: none;} .dd-select a:hover {color: #ffea00;} /* positioning */ ul.Menu ul{display:none} ul.Menu li:hover>ul{display:block} ul.Menu ul{position: absolute; left:-1px; top:98%;} ul.Menu li:hover{position:relative;} /* shrink to fit */ ul.Menu { float: left;} /* dropdown button */ ul.Menu { margin:0px; list-style:none; padding:0px;} /* menu case */ ul.Menu ul { margin:0px; list-style:none; padding:0px; background-color:#5c5c5c; border-color:#a3a3a3; border-width:1px; border-style:solid;} /* menu element padding */ ul.Menu li{ margin:5px 5px 5px 5px;} /* menu element */ ul.Menu a { display:block; background-color:#454545; text-align:left; padding:4px 9px 5px 9px; font:normal 11.5px Verdana; color: #f7f7f7; text-decoration:none;} /* menu hover */ ul.Menu li:hover>a{ background-color:#333333; color: #00ff60;} </style> </head> <body> <ul class="Menu"> <li><a href="#" target="_top">Select</a> <ul> <li><a href="#" target="_top">Option 1</a></li> <li><a href="#" target="_top">Option 2</a></li> <li><a href="#" target="_top">Option 3</a></li> </ul> </li> </ul> <p> </p> <p> </p> <p class="dd-select"><a href="#">Select (as it should look)</a></p> </body> </html> Now my problem is, I would like the dropdown menu's trigger button (labeled "Select") to look like the text link beneath (styled through .dd-select) instead of having it look like the the rest of the actual dropdown menu. So, different font size, decoration, colours, hover effect and, most importantly, no background color. The dropdown menu should of course keep its original look. Could anyone please give me a hint on how to accomplish this (perhaps with a code example or two) in an elegant way or maybe even refine my code to make it work? That would help me out a lot and I would like to thank everyone for reading and trying to help! Kind regards, Jakob it's best to get a visual of this one: www.viportals.com i'm talking about the buttons under the top banner. if you hover "Games", a drop down list appears. there is a 1pixel line between the "Games" button and its dropdown list (when you hover the "Games" button) which i want to get rid of, but can't. in IE, there are many horrible problems, probably due to the display:inline-block of the li a. the buttons are too tall and hang down below the bottom line of the horizontal bar, and the dropdown menu appears beside the "Games" button. i tried css Code: Original - css Code #sddm ul li a { padding-top: 0; padding-bottom: 0; margin-top:0; margin-bottom:0; } #sddm ul li a { in my separate ie css file, but its the same here is all the code if you need it to gain a better understanding (css, html, and js). css Code: Original - css Code /* DROP-DOWN NAVIGATION MENU */ #sddm { margin: 0; padding: 0; z-index: 30; } #sddm li { margin: 0; padding: 0; list-style: none; float: left; } #sddm li a { display: inline-block; text-decoration: none; color:#495B20; background-color:#BAD36B; border-left: 2px solid #fff; border-top: 2px solid #fff; border-right: 2px solid #000; border-bottom: 2px solid #000; } #sddm li a:hover { background-color:#495B20; color:#BAD36B; border-left: 2px solid #000; border-top: 2px solid #000; border-right: 2px solid #fff; border-bottom: 2px solid #fff; text-decoration:none; } #sddm li:hover div { position: absolute; visibility: hidden; margin: 0; padding: 0; background: #BAD36B; border-left: 2px solid #fff; border-top: 2px solid #fff; border-right: 2px solid #000; border-bottom: 2px solid #000; } #sddm li div { position: absolute; visibility: hidden; margin: 0; padding: 0; background: #BAD36B; border-left: 2px solid #fff; border-top: 2px solid #fff; border-right: 2px solid #000; border-bottom: 2px solid #000; } #sddm li div:hover { background-color:#495B20; color:#BAD36B; border-left: 2px solid #000; border-top: 2px solid #000; border-right: 2px solid #fff; border-bottom: 2px solid #fff; } #sddm li div:hover a{ background: #495B20; color: #BAD36B; } #sddm li div a { position: relative; display: block; margin: 0; padding: 5px 10px; width: auto; white-space: nowrap; text-align: left; text-decoration: none; border:none; font: 11px arial; } #sddm li div a:hover { text-shadow:#000; text-decoration:underline; border:none; } /* DROP-DOWN NAVIGATION MENU */ html Code: Original - html Code <div id='navbar'> <ul id="sddm"> <?php echo " <li> <a href='".get_home_link()."'> Home</a> </li> <li> <a href='".get_category_link("name=all&page=1")."'"; ?> onmouseover='mopen("m1")' <?php echo " onmouseout='mclosetime()'> Games</a> <div id='m1' onmouseover='mcancelclosetime()' onmouseout='mclosetime()'> "; $categories = get_categories("htmlize=true&order=order&sort=ASC"); foreach ($categories as $category) { $link=get_category_link("name="._sp($category['name'])."&page=1"); echo "<a href='".$link."'>".$category['name']; $category['gamenum'] = count(get_games("thecat="._sp($category['name']))); echo " (".$category['gamenum'].")"; echo "</a>"; } echo " </div> </li> <li> <a href='".get_users_link()."'> Members</a> </li> <li> <a href='".get_news_link()."'> News</a> </li> <li> <a href='".get_submit_link()."'> Submit</a> </li> <li> <a href='".get_links_link()."'> Links</a> </li> <li> <a href='".get_rules_link()."'> Rules</a> </li> <li> <a href='".get_faq_link()."'> FAQ</a> </li> <li> <a href='".get_contact_link()."'> Contact</a> </li>"; ?> </ul> <div style="clear:both"></div> </div> <div id='navbar'> <ul id="sddm"> <?php echo " <li> <a href='".get_home_link()."'> Home</a> </li> <li> <a href='".get_category_link("name=all&page=1")."'"; ?> onmouseover='mopen("m1")' <?php echo " onmouseout='mclosetime()'> Games</a> <div id='m1' onmouseover='mcancelclosetime()' onmouseout='mclosetime()'> "; $categories = get_categories("htmlize=true&order=order&sort=ASC"); foreach ($categories as $category) { $link=get_category_link("name="._sp($category['name'])."&page=1"); echo "<a href='".$link."'>".$category['name']; $category['gamenum'] = count(get_games("thecat="._sp($category['name']))); echo " (".$category['gamenum'].")"; echo "</a>"; } echo " </div> </li> <li> <a href='".get_users_link()."'> Members</a> </li> <li> <a href='".get_news_link()."'> News</a> </li> <li> <a href='".get_submit_link()."'> Submit</a> </li> <li> <a href='".get_links_link()."'> Links</a> </li> <li> <a href='".get_rules_link()."'> Rules</a> </li> <li> <a href='".get_faq_link()."'> FAQ</a> </li> <li> <a href='".get_contact_link()."'> Contact</a> </li>"; ?> </ul> <div style="clear:both"></div> </div> Hi There - Just finished the tutorial from List Apart. I've got the tabs working well, but I can't get the text colour to style in browsers (works fine in dreamweaver). I've been at this for so long that I'm sure I'm not seeing something that's obvious to fresh eyes. Could someone please look at my code and tell me where I'm being a bone-head? I've put the rules all over the place and can't seem to get the text-colour to go right. Thanks for your help. Here's the html: Code: <div id="tabnav"> <ul> <li><a href="#">Home</a></li> <li><a href="#">News</a></li> <li><a href="#">Products</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </div> Here's the CSS: Code: #tabnav { float:left; width:100%; background:#FFFFFF url("tab_background.png") repeat-x bottom; line-height:normal; font-family: Arial, Helvetica, sans-serif; text-decoration: none; font-size: 13pt; } #tabnav ul { margin:0; padding:10px 10px 0; list-style:none; } #tabnav li { float:left; background:url("tab_inactive_right.png") no-repeat right top; margin:0; padding:0; } #tabnav a { display:block; background:url("tab_inactive_left.png") no-repeat left top; padding:8px 15px 4px; } #tabnav a:link{ color:293356; text-decoration: none; } #tabnav a:hover{ color:596eba; text-decoration: none; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabnav a {float:none;} /* End IE5-Mac hack */ #tabnav #current { background-image:url("tab_active_right.png"); } #tabnav #current a { background-image:url("tab_active_left.png"); padding-bottom:5px; } I am having some trouble getting my drop-down menu to work in IE6... I was also having some issues with it working in IE8 compatibility mode. /*--- Issue in IE6 ---*/ When I mouse over the menu items nothing displays. It acts as though nothing is there. /*--- Issue in IE8 Compatibility Mode ---*/ I tested this in Virtual PC w/ an IE7 VHD and everything works great. However when I open in IE8 and click that button the menu items work but the boxes do not close. Instead they stay open. Here is a working link that shows the navigation both HTML and CSS: http://www.mjtexas.com/dev8a/navigation.html Here is my CSS: Code: /* Navigation */ #top-nav-wrapper {margin-left:6px;} #top-nav-wrapper h2 {color:#FFFFFF;font-size:14px;font-weight:bold;} ul#topnav {background:url(../images/bg_top_nav.jpg) no-repeat;width:972px;height:43px;margin:0 0 0 0;padding:0;float:left;} ul#topnav li{margin-top:0;} #topnav li.first-level span {position:absolute;left:-9999px;z-index:50;} #topnav li,#topnav li.first-level a {min-height:43px;display:block;} #topnav li {float:left;list-style:none;display:inline;padding:0;} li#nav-air-purifiers a.first-level {width:132px;} li#nav-air-purifier-filters a.first-level {width:177px;} li#nav-dehumidifiers a.first-level {width:152px;} li#nav-home-air-filters a.first-level {width:166px;} li#nav-learning-center a.first-level {width:167px;} li#nav-customer-support a.first-level {width:178px;} li#nav-air-purifiers:hover a.first-level {background:url(../images/bg_top_nav.jpg) 0px -43px no-repeat;} li#nav-air-purifier-filters:hover a.first-level {background:url(../images/bg_top_nav.jpg) -132px -43px no-repeat;} li#nav-dehumidifiers:hover a.first-level {background:url(../images/bg_top_nav.jpg) -309px -43px no-repeat;} li#nav-home-air-filters:hover a.first-level {background:url(../images/bg_top_nav.jpg) -461px -43px no-repeat;} li#nav-learning-center:hover a.first-level {background:url(../images/bg_top_nav.jpg) -627px -43px no-repeat;} li#nav-customer-support:hover a.first-level {background:url(../images/bg_top_nav.jpg) -794px -43px no-repeat;} ul#topnav li.first-level ul {display:block;margin:0 0 12px 7px;float:left;padding:14px 0 14px 0;} ul#topnav li.first-level ul {width:150px;} ul#topnav li.first-level ul li {margin:0 0 0 0;line-height:18px;padding:0 0px 0 0;width:230px;min-height:12px;float:left;} ul#topnav li.first-level ul li a {color:#f5f5f5;font-size:14px;text-decoration:none;text-align:left;min-height:12px;} ul#topnav li.first-level ul li a:hover {text-decoration:underline;} ul#topnav li div.topnav-dd-outer {position:absolute;z-index:500;width:500px;left:-999em;background:#2F68B2 repeat;margin:0 0 0 0;padding:0 0 0 0;} ul#topnav li#nav-air-purifiers div.topnav-dd-outer {margin:0 0 0 4px;} ul#topnav li#nav-air-purifier-filters div.topnav-dd-outer {width:300px; margin:0 0 0 11px;} ul#topnav li#nav-dehumidifiers div.topnav-dd-outer {width:300px; margin:0 0 0 11px;} ul li#nav-home-air-filters div.topnav-dd-outer {width:470px; margin-left:11px;} ul li#nav-home-air-filters div.topnav-dd-outer ul {width:215px;} ul li#nav-learning-center div.topnav-dd-outer {width:230px; margin-left:-74px;} ul li#nav-customer-support div.topnav-dd-outer {width:230px; margin-left:-57px;} ul#topnav li:hover div.topnav-dd-outer {left:auto;} div.topnav-dd-inner {position:relative;background:#ebebeb repeat;margin-left:17px;margin-bottom:-5px;padding:0 0 0 0;} Here is my HTML: Code: <div class="clearfix clear" id="top-nav-wrapper"> <ul class="clearfix" id="topnav"> <li class="first-level" id="nav-air-purifiers"><a class="first-level" href="/video"><span>Air Purifiers</span></a> <div class="topnav-dd-outer"> <div class="topnav-dd-inner clearfix"> <ul class="three-col clearfix"> <li><h2>Shop by Brand</h2></li> <li><a href="category.asp?subcat=Air-Purifiers&linkid=globalNav2">View All Brands</a></li> <li><a href="category.asp?subcat=Air-Purifiers&manufacturer=AirFree">AirFree</a></li> <li><a href="category.asp?subcat=Air-Purifiers&manufacturer=Airgle">Airgle</a></li> <li><a href="category.asp?subcat=Air-Purifiers&manufacturer=AirTamer">AirTamer</a></li> <li><a href="category.asp?subcat=Air-Purifiers&manufacturer=Alen">Alen</a></li> <li><a href="category.asp?subcat=Air-Purifiers&manufacturer=Aller">AllerAir</a></li> <li><a href="category.asp?subcat=Air-Purifiers&manufacturer=Austin-Air">Austin Air</a></li> <li><a href="category.asp?subcat=Air-Purifiers&manufacturer=BlueAir">BlueAir</a></li> <li><a href="category.asp?subcat=Air-Purifiers&manufacturer=Coway">Coway</a></li> <li><a href="category.asp?subcat=Air-Purifiers&manufacturer=Honeywell">Honeywell</a></li> <li><a href="category.asp?subcat=Air-Purifiers&manufacturer=IQAir">IQAir</a></li> <li><a href="category.asp?subcat=Air-Purifiers&manufacturer=LightAir">Light Air</a></li> <li><a href="category.asp?subcat=Air-Purifiers&manufacturer=SHA">Sharper Image</a></li> <li><a href="category.asp?subcat=Air-Purifiers&manufacturer=whirlpool">Whirlpool</a></li> <li><a href="category.asp?subcat=Air-Purifiers&manufacturer=Oreck">Oreck</a></li> </ul> <ul class="three-col clearfix"> <li><h2>Shop by Needs</h2></li> <li><a href="lc_home.asp?linkid=globalNav">Test Results</a></li> <li><a href="allergy.asp?linkid=globalNav">Allergy</a></li> <li><a href="category.asp?subcat=Air-Purifiers&fl=Asthma&linkid=globalNav">Asthma</a></li> <li><a href="category.asp?subcat=Air-Purifiers&fl=Dust&linkid=globalNav">Dust</a></li> <li><a href="category.asp?subcat=Air-Purifiers&fl=Odor&linkid=globalNav">Odor</a></li> <li><a href="category.asp?subcat=Air-Purifiers&fl=Smoke&linkid=globalNav">Smoke</a></li> <li><a href="category.asp?subcat=Air-Purifiers&fl=Bacteria+Flu+Virus&linkid=globalNav">Bacteria/Flu/Virus</a></li> <li><a href="category.asp?subcat=Air-Purifiers&fl=Mold&linkid=globalNav">Mold</a></li> <li><a href="category.asp?subcat=Air-Purifiers&fl=Pet+Odor&linkid=globalNav">Pet Odor/Dander</a></li> <li><a href="category.asp?subcat=Air-Purifiers&fl=Chemical&linkid=globalNav">Chemical</a></li> <li><a href="category.asp?subcat=Air-Purifiers&fl=UV+Ultraviolet&linkid=globalNav">UV/Ultraviolet</a></li> <li><a href="category.asp?subcat=Air-Purifiers&fl=ionic&linkid=globalNav">Ionic</a></li> <li><a href="category.asp?subcat=Air-Purifiers&fl=Energy+Star&linkid=globalNav">Energy Star</a></li> <li><a href="category.asp?subcat=Air-Purifiers&fl=Wildfires&linkid=globalNav">Wildfires</a></li> </ul> <ul class="three-col clearfix"> <li><h2>Special Deals</h2></li> <li><a href="category.asp?subcat=Air-Purifiers&fl=Specials">Specials</a></li> <li><a href="category.asp?search=whole+house">Whole House</a></li> <li><a href="category.asp?search=package">Package Deals</a></li> <li style="padding:12px 0 0 0"><h2>Help Me Choose</a></h2></li> <li><a href="lc_top10.asp?linkid=globalNav">Top 10 Air Purifiers</a></li> <li><a href="top_air_purifier_brands.asp?linkid=globalNav">Brand Comparisons</a></li> <li><a href="lc_home.asp?linkid=globalNav">Air Purifier Test Results</a></li> <li><a href="reviews2.asp?linkid=globalNav">Air Purifier Reviews</a></li> <li><a href="comparisonChart.asp?linkid=globalNav">Comparison Chart</a></li> </ul> </div> </div><!--/ .topnav-dd-outer, .topnav-dd-inner --> <li class="first-level" id="nav-air-purifier-filters"><a class="first-level" href="/briefing-room"><span>Air Purifier Filters</span></a> <div class="topnav-dd-outer"> <div class="topnav-dd-inner clearfix"> <ul class="two-col clearfix"> <li><h2>Shop for Replacement Air Filters</h2></li> <li><a href="replacementfilters.asp?linkid=globalNav2">View All Replacement Air Filters</a></li> <li><a href="category.asp?subcat=Air-Filters&manufacturer=Airgle">Airgle</a></li> <li><a href="category.asp?subcat=Air-Filters&manufacturer=AirTamer">AirTamer</a></li> <li><a href="alenreplacementfilters.asp?linkid=globalNav2">Alen</a></li> <li><a href="category.asp?subcat=Air-Filters&manufacturer=Aller">AllerAir</a></li> <li><a href="category.asp?subcat=Air-Filters&manufacturer=Austin-Air">Austin Air</a></li> <li><a href="category.asp?subcat=Air-Filters&manufacturer=BlueAir">BlueAir</a></li> <li><a href="category.asp?subcat=Air-Filters&manufacturer=Coway">Coway</a></li> <li><a href="category.asp?subcat=Air-Filters&manufacturer=Honeywell">Honeywell</a></li> <li><a href="category.asp?subcat=Air-Filters&manufacturer=Hunter">Hunter</a></li> <li><a href="category.asp?subcat=Air-Filters&manufacturer=IQAir">IQAir</a></li> <li><a href="category.asp?subcat=Air-Filters&manufacturer=Sharp">Sharp</a></li> <li><a href="category.asp?subcat=Air-Filters&manufacturer=Whirlpool">Whirlpool</a></li> <li><a href="category.asp?subcat=Air-Filters&manufacturer=Other">Other</a></li> </ul> </div> </div><!--/ .topnav-dd-outer, .topnav-dd-inner --> </li> <li class="first-level" id="nav-dehumidifiers"><a class="first-level" href="/issues"><span>Dehumidifiers</span></a> <div class="topnav-dd-outer"> <div class="topnav-dd-inner clearfix"> <ul class="one-col clearfix"> <li><h2>Shop for Dehumidifiers</h2></li> <li><a href="category.asp?subcat=Dehumidifiers&linkid=globalNav2">View All Dehumidifiers</a></li> <li><a href="category.asp?subcat=Dehumidifiers&manufacturer=Alen">Alen</a></li> <li><a href="category.asp?subcat=Dehumidifiers&manufacturer=Comfort-Aire">Comfort-Aire</a></li> <li><a href="category.asp?subcat=Dehumidifiers&manufacturer=Danby">Danby</a></li> <li><a href="category.asp?subcat=Dehumidifiers&manufacturer=DeLonghi">DeLonghi</a></li> <li><a href="category.asp?subcat=Dehumidifiers&manufacturer=Sunpentown">Sunpentown</a></li> </ul> </div> </div><!--/ .topnav-dd-outer, .topnav-dd-inner --> </li> <li class="first-level" id="nav-home-air-filters"><a class="first-level" href="/administration"><span>Home Air Filters</span></a> <div class="topnav-dd-outer"> <div class="topnav-dd-inner clearfix"> <ul class="two-col clearfix"> <li><h2>Shop by Needs</h2></li> <li><a href="homeFilters.asp?linkid=globalNav2">Home Filters by Alen</a></li> <li><a href="category.asp?subcat=Home-Filters&fl=Healthy+Home+%26+Basic+HVAC+Care">Healthy Home</a></li> <li><a href="category.asp?subcat=Home-Filters&fl=Allergy+Plus">Allergy Plus</a></li> <li><a href="category.asp?subcat=Home-Filters&fl=Asthma+%26+Respiratory+Sensitivity">Asthma & Respiratory Sensitivity</a></li> <li><a href="category.asp?subcat=Home-Filters&fl=HVAC+Filters">HVAC Filters</a></li> </ul> <ul class="two-col clearfix"> <li><h2>Shop by Rating</h2></li> <li><a href="category.asp?subcat=Home-Filters&manufacturer=Merv11-Gold-5in">Gold Merv 11 5"</a></li> <li><a href="category.asp?subcat=Home-Filters&manufacturer=Merv11-Gold-1in">Gold Merv 11 1"</a></li> <li><a href="category.asp?subcat=Home-Filters&manufacturer=Merv-13-Plat-1in">Platinum Merv 13 1"</a></li> <li><a href="category.asp?subcat=Home-Filters&manufacturer=Merv13-Plat-5in">Platinum Merv 13 5"</a></li> <li><a href="category.asp?subcat=Home-Filters&manufacturer=Merv8-silver">Silver Merv 8 1"</a></li> <li><a href="category.asp?subcat=Home-Filters&manufacturer=Merv8-silver-5in">Silver Merv 8 5"</a></li> <li><a href="category.asp?subcat=Whole-House&manufacturer=EnviroSept">Envirosept</a></li> </ul> </div> </div><!--/ .topnav-dd-outer, .topnav-dd-inner --> </li> <li class="first-level" id="nav-learning-center"><a class="first-level" href="/about"><span>Learning Center</span></a> <div class="topnav-dd-outer"> <div class="topnav-dd-inner clearfix"> <ul class="two-col clearfix"> <li><h2>Get Informed Now!</h2></li> <li><a href="lc_top10.asp?linkid=globalNav2">Top 10 Air Purifiers</a></li> <li><a href="top_air_purifier_brands.asp?linkid=globalNav2">Brand Comparisons</a></li> <li><a href="lc_home.asp?linkid=globalNav2">Air Purifier Test Results</a></li> <li><a href="reviews2.asp?linkid=globalNav2">Air Purifier Reviews</a></li> <li><a href="comparisonChart.asp?linkid=globalNav">Comparison Chart</a></li> <li><a href="lc_Allergy-allergens.asp">Allergy</a></li> <li><a href="lc_Asthma-allergicAsthma.asp">Asthma</a></li> <li><a href="lc_Bacteria-uvViruses.asp">Bacteria and Flu Viruses</a></li> <li><a href="lc_chemical.asp">Chemical</a></li> <li><a href="lc_dust.asp">Dust</a></li> <li><a href="lc_flooding.asp">Flooding</a></li> <li><a href="lc_ionProducers-negativeIons.asp">Ion Producers</a></li> <li><a href="lc_Mold-allergies.asp">Mold</a></li> <li><a href="lc_odor.asp">Odor</a></li> <li><a href="lc_pets.asp">Pets</a></li> <li><a href="lc_Smoke-secondhandSmoke.asp">Smoke</a></li> <li><a href="lc_homefilters.asp">Home Filters</a></li> <li><a href="lc_health.asp">For Your Health</a></li> </ul> </div> </div><!--/ .topnav-dd-outer, .topnav-dd-inner --> </li> <li class="first-level" id="nav-customer-support"><a class="first-level" href="/our-government"><span>Customer Support</span></a> <div class="topnav-dd-outer"> <div class="topnav-dd-inner clearfix"> <ul class="two-col clearfix"> <li><h2>Need Help?</h2></li> <li><a href="help.asp?linkid=globalNav2">Help</a></li> <li><a href="contactcustomerservice.asp?linkid=globalNav2">Customer Service</a></li> <li><a href="returning.asp?linkid=globalNav2">Returns</a></li> <li><a href="contactus.asp?linkid=globalNav2">Contact Us</a></li> </ul> </div> </div><!--/ .topnav-dd-outer, .topnav-dd-inner --> </li> </ul> </div> Thank you to all in advance for you help. Much appreciated Ok for some reason for the life of me I cant get this navigation to render right in Firefox. Normaly I have the issues with IE buts its firefox this time. Can some one take a quick look at ... http://dev.signaturewebmedical.com/...meticdentistry/ here is the css Code: body { background: url("images/bg.jpg") repeat; font: 12px Verdana, Arial, Helvetica, sans-serif; margin-right:0px; margin-left:0px; margin-top:0px; padding:0px; } a{ color:blue; } a:hover{color:red;} #frame { width:820px; height:; padding:0px; text-align:left; border-left-width: 0px; border-right-style: solid; border-left-style: solid; border-left-color: #889db3; border-right-width: 0px; border-right-color: #ffffff; } #topleft{ position:absolute; left:0px; top:0px; width:546px; } #logo { height:72px; width:546px; padding-top:0px; padding-left:0px; } #menudiv{ position:absolute; width:675px; top:141px; left:10px; height:26px; FONT-FAMILY:Verdana, Arial, Helvetica, sans-serif; LIST-STYLE-TYPE: none; FONT-VARIANT: small-caps; padding-left:0px; border-top:1px #beb088 solid; border-bottom:1px #beb088 solid; text-align:left; } html>body #menudiv{ left:60px; } #menu{ LIST-STYLE-TYPE: none; FONT-VARIANT: small-caps; margin-left:-50px; } #menu A { PADDING-RIGHT: 6px; PADDING-LEFT: 5px; FLOAT: left; PADDING-BOTTOM: 0px; COLOR: #000; PADDING-TOP: 6px; height:20px; font-weight: bold; TEXT-DECORATION: none; text-shadow: black 3px 3px, yellow -3px -3px; font-size:11px; } #menu A:hover { color:white; background-color:tan; } #menu LI { DISPLAY: inline; MARGIN: 0px; TEXT-ALIGN: left; } hr{ text-align:left; padding:0px; width:620px; margin:2px; height:1px; color:#beb088; style:noshade; } #topright{ position:absolute; top:50px; left:460px; } #contenthome{ float:left; margin-top:20px; width:630px; margin-bottom:20px; } html>body #contenthome{ margin-top:120px; } #contenthome p{ margin-left:15px; font-size:110%; line-height:110%; } #contenthome p.first{ padding-top:10px; } #footer{ height:40px; float:left; width:640px; padding:5px; text-align:center; font: 10px Verdana, Arial, Helvetica, sans-serif; color:#111111; border-top:1px #beb088 solid; } #footer a{ color:#666; font-weight: normal; } #footer a:hover{ color: #444444; font-weight:bold; } .bigger {font-size:160%;} .blu {color:blue;} .blue2 {color:#0099cc;} .orange {color:orange;} .bold{font-weight:bold;} .black1{color:#000;} h1{ color:navy; font-size: 130%; padding:5px; margin:0; } .nobold{font-weight:normal;} } h5{ color:#889db3; margin:0; padding:0; } h3{ font-size:100%; color:navy; margin:0; padding:5px; } #contenthome img{ padding:5px; padding-right:15px; } #contenthome ul li{ font-size:90%; } #contenthome ul li a{ color:blue; text-decoration:none; } #contenthome ul li a:hover{ color:red; text-decoration:underline; } #solutions ul{ list-style-type:square; color:blue; } #solutions ul li{ padding:3px; padding-bottom:8px; color:#555; } #solutions ul li a{ font-weight:bold; font-size:115%; text-decoration:underline; color:blue; } #contenthome a img{ border:1px tan solid; padding:0; margin:0; } #contenthome a:hover img{ border:1px blue solid; } #contactdiv{ float:right; width:200px; height:110px; padding:10px; text-align:center; } #contactdiv a{ font-size:150%; color:red; font-weight:bold; text-align:center; text-decoration:underline; } #contactdiv a:hover{ color:blue; } #portfoliodiv{ float:right; width:200px; height:auto; padding:10px; text-align:center; } p.quote{ font-size:110%; display:block; width:400px; padding-left:80px; text-align:center; font-style:italic; } Hello. I know all about the damn IE6 'hover' menu problem, yet have only just came to not being able to fix it with a new site I edited. In IE7/8 and Firefox and Opera, the menu looks and works great. It's a horizontal menu. Unfortunately, in IE6 each top menu item or header is using the full width of the page and thus each one is on a new line, completely screwing everything up. I'm using the .htc file from here (http://www.xs4all.nl/~peterned/csshover.html) to fix some things, but the menu still isn't displayed horizontally properly, each main header menu is on a new line instead of all on one line. Please, can someone tell me what stupid line of code I need to fix IE6? I'm sorry, but unfortunately I cannot link to the page as it's a secure web page only viewable to admins and customers. You should be able to edit the links in the href code though or just replace them with '#' just to test. And don't worry about the arrow_grey images as all that is is an image that changes between one or the other when you hover over the menu (a right arrow or a down arror when hovering over the menu). CSS: Code: #menubar-new { width: 100%; background-color: #069; color: #CCC; border-top: 1px solid black; border-bottom: 1px solid black; vertical-align: middle; white-space: nowrap; padding-bottom: 1px; margin-bottom: 1px; z-index: 99; font-size: small; } ul#navigation-1 { margin:0; padding:0; list-style:none; width:100%; height:21px; border-top:1px solid #006699; border-bottom:1px solid #006699; font-weight:bold; font-size:inherit; font-family:inherit; } ul#navigation-1 li { margin:0; padding:0; display:block; float:left; position:relative; width:auto; border-top:1px solid #FFFFFF; border-right:1px solid #FFFFFF; border-bottom:1px solid #FFFFFF; } ul#navigation-1 li a span, ul#navigation-1 li:hover a span, ul#navigation-1 li a:hover span { position:relative; vertical-align:top; font-size:12pt; color:#FFFFFF; } ul#navigation-1 li a span.onhover1, ul#navigation-1 li:hover a span.onhover2, ul#navigation-1 li a:hover span.onhover2 { display:inline; vertical-align:middle; } ul#navigation-1 li a span.onhover2, ul#navigation-1 li:hover a span.onhover1, ul#navigation-1 li a:hover span.onhover1 { display:none; vertical-align:middle; } ul#navigation-1 li a:link, ul#navigation-1 li a:visited, ul#navigation-1 li:hover a, ul#navigation-1 li a:hover, ul#navigation-1 li a:active { padding-top:2px; padding-bottom:5px; padding-left:6px; padding-right:6px; display:block; text-align:left; text-decoration:none; color:#ffffff; width:auto; height:13px; } ul#navigation-1 li a:link, ul#navigation-1 li a:visited { background:#006699; } ul#navigation-1 li:hover a, ul#navigation-1 li a:hover, ul#navigation-1 li a:active { background:#2288BB; } ul#navigation-1 li ul.navigation-2 { margin:0; padding:1px 1px 0; list-style:none; display:none; background:#ffffff; width:auto; position:absolute; top:21px; left:-1px; } ul#navigation-1 li:hover ul.navigation-2 { display:block; border-top:none; } ul#navigation-1 li ul.navigation-2 li { width:100%; clear:left; border-top:none; } ul#navigation-1 li ul.navigation-2 li a:link, ul#navigation-1 li ul.navigation-2 li a:visited, ul#navigation-1 li ul.navigation-2 li:hover a, ul#navigation-1 li ul.navigation-2 li a:active, ul#navigation-1 li ul.navigation-2 li a:hover { clear:left; padding-top:2px; padding-bottom:5px; padding-left:6px; padding-right:6px; width:auto; position:relative; z-index:1000; } ul#navigation-1 li ul.navigation-2 li a:link, ul#navigation-1 li ul.navigation-2 li a:visited { background:#006699; } ul#navigation-1 li ul.navigation-2 li:hover a, ul#navigation-1 li ul.navigation-2 li a:active, ul#navigation-1 li ul.navigation-2 li a:hover { background:#2288BB; } ul#navigation-1 li ul.navigation-2 li a span, ul#navigation-1 li ul.navigation-2 li:hover a span, ul#navigation-1 li ul.navigation-2 li a:hover span { position:relative; vertical-align:top; font-size:12pt; } ul#navigation-1 li ul.navigation-2 li a span { color:#FFFFFF; } ul#navigation-1 li ul.navigation-2 li:hover a span, ul#navigation-1 li ul.navigation-2 li a:hover span { color:#000000; } HTML: Code: <div id="menubar-new"> <div id="menu-container"> <ul id="navigation-1"> <li> <a href="Home.shtml" title="Status">Status</a> </li> <li><a href="#" title="Maintenance">Maintenance <span class="onhover1"><img alt="" border="0" src="images/arrow_grey2.gif"></span><span class="onhover2"><img alt="" border="0" src="images/arrow_grey2_down.gif"></span></a> <ul class="navigation-2"> <li><a href="BusinessReport.shtml?DeferQuery=true">Businesses</a></li> <li><a href="TerminalReport.shtml?DeferQuery=true">Terminals</a></li> <li><a href="BankRecordReport.shtml?DeferQuery=true">BankRecords</a></li> <li><a href="ContractReport.shtml?DeferQuery=true">Contracts</a></li> <li><a href="RegEReport.shtml?DeferQuery=true">RegEs</a></li> <li><a href="MessageReport.shtml?DeferQuery=true">Messages & Alerts</a></li> <li><a href="UserReport.shtml?DeferQuery=true">Users & Security</a></li> <li><a href="TroubleTicketReport.shtml?DeferQuery=true">Call Tickets</a></li> <li><a href="WizardReport.shtml?DeferQuery=true">Wizards</a></li> <li><a href="WirelessAssociationReport.shtml?DeferQuery=true">Wireless Associations</a></li> <li><a href="WorkflowReport.shtml?DeferQuery=true">Workflows</a></li> <li><a href="BillingGroupReport.shtml?DeferQuery=true">Billing Groups</a></li> <li><a href="RecurringChargeReport.shtml?DeferQuery=true">Recurring Adjustments</a></li> <li><a href="AdjustmentReport.shtml?DeferQuery=true">Adjustment Journal</a></li> </ul> </li> <li><a href="#" title="Reports">Reports <span class="onhover1"><img alt="" border="0" src="images/arrow_grey2.gif"></span><span class="onhover2"><img alt="" border="0" src="images/arrow_grey2_down.gif"></span></a> <ul class="navigation-2"> <li><a href="ComplianceReport.shtml?DeferQuery=true&$lr_override=true">Compliance Report</a></li> <li><a href="ComplianceDetail.shtml?DeferQuery=false&$lr_override=true">Compliance Detail Report</a></li> <li> ... Thanks! |