#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2009
    Posts
    3
    Rep Power
    0

    CSS drop down menu not


    First let me start of with this for doing all this work for my drop down menu and then finding out that IE6 (apparently 50% of people browsing) doesn't support :hover except on anchor tags.

    Here is my situation. I finally got my drop down menu working. However, there are three issues.

    when I hover over the 'companies' menu item

    1) the menu expands and pushes the 'blog' and 'contact' menu items further down the menu. I will say that I did not define a width on the li tags because this is actually for a wordpress theme and I wanted to allow for more pages that might be added later. I thought that by defining a width I would be more likely to fill up my menu container.

    2) the child/nested li tags aren't under the parent li tag. Basically the sub-menu items show up to the bottom and right of the 'companies' menu item. I want them to show up directly underneath the parent menu item.

    3) the longer sub-menu items (nested li tags) are not showing up on the same line. It's like there is a width that is causing them to overlap or go down to the next row. Not sure if that makes sense. I am wanting it to appear on one line no matter how long the menu item is.


    I am sure that not defining a width on the li tags have something to do with some of these problems but I wanted others to take a look at it.

    Code(validated) and styles below. Tried to keep it simple. there are two img files that I use as well but couldn't figure out how to upload those.

    Any and all help from the CSS gurus will be greatly appreciated.

    Code:
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Drop Menu Test</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body>
    
    <div id="access">
    	<div id="menu-container">
    		<div id="menu">
            
            
    	<ul>
    		<li><a href="#">Home</a></li>
    		<li><a href="#">About</a></li>	
    		<li><a href="#">Services</a></li>
    		<li><a href="#">Compare</a></li>
    		<li><a href="#">Companies</a>
    		     <ul>
        			<li><a href="#">Company number one</a></li>
           			<li><a href="#">Company 2</a></li>
                           <li><a href="#">Company #3</a></li>
                           <li><a href="#">Company number 4</a></li>
           	             </ul>	
        	        </li>			
                   <li><a href="#">Blog</a></li>
    		<li><a href="#">Contact</a></li>
    	</ul>
        
        
    		</div><!--menu-->
    	</div><!--menu-container-->
    </div><!--access-->
    </body>
    </html>
    Code:
    body{
    	background-color: #999;	
    	margin: 0;
    }
    
    ul,li {
    	margin: 0;
    }
    
    div#access {
    	margin: 0px;
    	background-repeat: repeat-x;
    	background-image: url(images/navbar-bckgrd.gif);
    }
    
    div#menu {
    	height:1.5em;
    	width:100%;
    	margin-right: 0;
    	margin-bottom: 0;
    	margin-left: 0;
    }
    
    div#menu a {
    	color: #FFF;
    	text-decoration: none;
    }
    
    div#menu-container {
    	width: 974px;
    	margin-right: auto;
    	margin-left: auto;
    	height: 27px;
    	margin-top: 0px;
    	margin-bottom: 0px;
    }
    
    div#menu li {
    	list-style-type: none;
    	color: #FFF;
    	position: relative;
    	float: left;
    	height: 27px;
    	/*width: 6em;*/
    	font-size: 1.2em;
    	line-height: 1em;
    }
    
    div#menu ul a {
           display:block;
           margin-right:1em;
           padding:0.2em 0.5em;
    }
    
    div#menu li a:hover {
    	background-image: url(images/hover%20menu.jpg);
    	background-repeat: repeat-x;
    }
    
    /*second teir*/
    
    div#menu li ul {
    	display: none;
    	background-repeat: repeat;
    	background-color: #CCC;
    	margin: 0px;
    }
    
    div#menu li:hover ul {
    	display: inline;
    	float: left;
    	width: 10em;
    	height: auto;
    }
    
    div#menu li ul li {
    	font-size: 0.9em;
    	width: 7em;
    	margin-left: 0px;
    }
    
    div#menu li ul li a {
    	color: #000;
    	margin-left: 0px;
    }
    
    div#menu li ul li a:hover {
    	color: #FFF;
    }
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    Welcome to DevShed Forums, ripeffectdesign.

    For most sites IE6 usage is under 30% now.

    So you didn't include a doctype in the code you posted because of the "new users are not allowed to post URLs" warning?

    I suggest you read follow this tutorial: http://www.htmldog.com/articles/suckerfish/dropdowns/

    1) You can avoid that by absolutely positioning the sub-menu.

    2) That's because of the default left padding on the <ul>.

    3) The width of "div#menu li ul li" is smaller than that of "div#menu li:hover ul". Use a width that's wide enough to accommodate any likely text length.
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).

IMN logo majestic logo threadwatch logo seochat tools logo