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

    Join Date
    Oct 2009
    Rep Power

    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.

    <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" />
    <div id="access">
    	<div id="menu-container">
    		<div id="menu">
    		<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>
        			<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>
                   <li><a href="#">Blog</a></li>
    		<li><a href="#">Contact</a></li>
    	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 {
    	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 {
           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
    USA (verifiably)
    Rep Power
    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