www.webdeveloper.com
Results 1 to 14 of 14

Thread: css menu

  1. #1
    Join Date
    Jan 2003
    Location
    PA
    Posts
    1,898

    css menu

    Could someone help me get the dropdown menu that is right below the header image on the right to work right. I want the entire <li> of the menu item to have a rollover background colot, right now only the a tag is getting the background color. Also, I can't get the width of the dropdown menu to be the same width of the top menu item, it's too long by a few pixels. here is the site link: http://www.zluth.org/admin/Heath/. also, this menu does not work in IE6 at all, no dropdowns. I'm trying to use the Suckerfish menu, but it doesn't seem to be working.

    Also, the menu under that, I have a text-decoration: underling when hoving over the links doesn't work in IE (6).

    Thanks.
    Last edited by jrthor2; 07-25-2008 at 10:52 AM.

  2. #2
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    At the moment, the <li> is only the size of the <a>. The dropdown <ul> is wider due to the inherited 5px of left padding. When doing these menus, it works better if you float both the <a>s and <li>s, and then the <a>s can be sized to suit. The <a>s can get the left padding instead of the <ul>, and if the height and line-height are set equal, there is no need for top or bottom padding. Display:none on the dropdown <ul>s is not a good idea as it hides the links from screen readers - instead position them way off to the left, and bring them back on hover. The top and left coordinates should be explicitly set - "auto" causes the browser to guess, and they can guess wrong.

    Try this css :
    Code:
    /* Nav 1 */
    #nav1 ul {
    	padding: 0;
    	margin: 0;
    }
    #nav1 li {
    	float: left;
    	position: relative;
    	list-style: none;
    }
    #nav1 a {
    	font-weight: bold;
    	color: #ffffff;
    	text-decoration: none;	
    	font-size:120%;
    	float: left;
    	width: 130px;
    	padding: 0 0 0 5px;
    	height: 30px;
    	line-height: 30px;
    }
    #nav1 li li a {
    	font-weight: normal;
    	color: #ffffff;
    	text-align: left;
    	font-size:120%;
    }
    #nav1 li li a:hover {
    	text-decoration: underline;
    }
    #nav1 li ul {
    	position: absolute; 
    	top: 30px;
    	left: -999em;
    	background-color: #b98c49;
    	width: 135px;
    }
    #nav1 ul li:hover, #nav1 ul li.over {
    	background-color: #b98c49;
    }
    #nav1 li:hover ul, #nav1 li.over ul { 
    	left: 0;
    }
    As for the javascript, I find this one from Htmldog to be more reliable :
    Code:
    sfHover = function() {
    	var sfEls = document.getElementById("nav1").getElementsByTagName("LI");
    	for (var i=0; i<sfEls.length; i++) {
    		sfEls[i].onmouseover=function() {
    			this.className+=" over";
    		}
    		sfEls[i].onmouseout=function() {
    			this.className=this.className.replace(new RegExp(" over\\b"), "");
    		}
    	}
    }
    if (window.attachEvent) window.attachEvent("onload", sfHover);

  3. #3
    Join Date
    Jan 2003
    Location
    PA
    Posts
    1,898
    That's great, not they dropdown in IE6. The only thing with the dropdown's in IE6, they seem to flicker when mousing over the optins, like I'm taking the cursor off the menu.

    How would I get the backgroung for "Menu 1", "Menu 2", etc to have a background color on mouseover as well?

    thanks again, you're a great help!!

  4. #4
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    Oops, my fault .....

    The second last rule there shouldn't have ul's listed, and should look like
    Code:
    #nav1 li:hover, #nav1 li.over {
    	background-color: #b98c49;
    }
    A slight flicker in IE6 when changing background is very normal, and gets a bit more complex to solve.
    Last edited by Centauri; 07-25-2008 at 07:10 PM.

  5. #5
    Join Date
    Jan 2003
    Location
    PA
    Posts
    1,898
    That changed it, but what if I want the top "Menu 1" to be a different color thatn the rollover background? If I change what you ad to a different color, white for example, then the "Menu 1" becomes white when I rollover it, but so do the sub menu items when I rollover them.

    Also, why don't my second level links get underlinded when rolling over them?

    Thanks for all your help!!

  6. #6
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    To change the submenu rollovers, add a colour change to the a:hovers :
    Code:
    #nav1 li li a:hover {
    	text-decoration: underline;
    	background-color: #661100;
    }
    As for the underline in IE, setting the line height seems to sort it :
    Code:
    .header-bottom ul#nav2 a {
    	color: #ffffff;
    	text-decoration: none;
    	font-size:120%;
    	line-height:1.2em;
    }

  7. #7
    Join Date
    Jan 2003
    Location
    PA
    Posts
    1,898
    That's great, thanks for all the help!!

  8. #8
    Join Date
    Jan 2003
    Location
    PA
    Posts
    1,898
    One more question about this menu. What if I wanted to have a rollover on one of the sub menus? So rollover Menu 1, then rollover Submenu1 and have a menu popout to the left of that item with more options? Here is a new link to the site http://masterfulshifts.com/index.php

    Thanks.

  9. #9
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    Add to the css after the current menu styles :
    Code:
    #nav1 li:hover ul ul, #nav1 li.over ul ul {
    	left: -999em;
    }
    #nav1 li li:hover ul, #nav1 li li.over ul{
    	top: 0;
    	left: -135px;
    }

  10. #10
    Join Date
    Jan 2003
    Location
    PA
    Posts
    1,898
    That seems to work in FireFox, but not in IE6.

  11. #11
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    Seems to be one of specifics I think. Try changing the order of those last two style rules and see if that works :
    Code:
    #nav1 li li:hover ul, #nav1 li li.over ul {
    	top: 0;
    	left: -135px;
    }
    #nav1 li:hover ul ul, #nav1 li.over ul ul {
    	left: -999em;
    }

  12. #12
    Join Date
    Jan 2003
    Location
    PA
    Posts
    1,898
    When I swapped them around, they no longer work in FireFox or IE6.

  13. #13
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    Set this up locally for testing. For some reason, IE6 doesn't like the dropdown <a>s being floated. This seems to fix it :
    Code:
    #nav1 li li a {
    	font-weight: normal;
    	color: #ffffff;
    	text-align: left;
    	font-size:120%;
    	float: none;
    	display: block;
    }

  14. #14
    Join Date
    Jan 2003
    Location
    PA
    Posts
    1,898
    That works now in IE6, thanks. Is there anyway to fix the flickering in IE6?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles