Drop Down Menu Problems

HTML & CSS
1

Hi all

I’ve been trying all day to get this drop down menu working. The code works fine when the menu is text only but I’m using background images for the buttons normal and hover states. The main problem is that the image used of the nav button is being shown in place of the drop down menu buttons, also when I roll off the button on to the drop down menu I want the button stay on the hover state but it goes back to the normal state.

Here is a link to a stripped down version and an image of what I’m trying to achieve.

Any help with this would be greatly appreciated

http://www.ttmt.org.uk/dropdown/


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

	<title></title>
  <style type="text/css" media="screen">  
    #headerwrap{
      background:#4bb9c6;
      height:164px;
    }

    #headercontent{
      height:100%;
      position:relative;
      width:900px;
      margin:0 auto;
    }
    #headercontent #mainNav{
      position:absolute;
      bottom:0;
    }
    #headercontent #mainNav li{
      float:left;
    }
    #headercontent #mainNav li a{
      display:block;
      text-indent:-1000em;
      position:relative;
    }
    #headercontent #mainNav li.home a{
      height:41px;
      width:62px;
      background:url(home.gif) 0 0 no-repeat;
      overflow:hidden;
    }
    #headercontent #mainNav li.courses a{
      height:41px;
      width:83px;
      background:url(courses.gif) 0 0 no-repeat;
      overflow:hidden;
    }  
    #headercontent #mainNav li.home a:hover{
      background:url(home.gif) 0 -41px no-repeat;
    }
    #headercontent #mainNav li.courses a:hover{
      background:url(courses.gif) 0 -41px no-repeat;
    }
    #headercontent #mainNav li ul{
      position:absolute;
      left:-1000em;
      background:#3a8f99;
      width:5em;
    }
    #headercontent #mainNav li ul a{
      color:#fff;
      text-indent:0;
      background: #3a8f99;
    }
    #headercontent #mainNav li:hover ul{
      left:auto;
    }


    #explain{
      position:absolute;
      bottom:0;
    }
  </style>
</head>
  
<body>
  <div id="wrap">
    <div id="headerwrap">
      <div id="headercontent">
        <ul id="mainNav">
          <li class="btn home"><a href="#">Home</a></li>
          <li class="btn courses"><a href="#">Courses</a>
            <ul>
              <li><a href="http://www.google.com">One</a></li>
              <li><a href="http://www.bbc.com">Two</a></li>
              <li><a href="#">Three</a></li>
              <li><a href="#">Four</a></li>
              <li><a href="#">Five</a></li>
            </ul>
          </li>     
        </ul>
      </div><!-- #headercontent -->
    </div><!-- #headerwrap -->
    <div id="explain">
      <h2>I wanted it to work something like this</h2>
      <img src="test.gif" />
    </div><!-- #explain -->
</body>
</html>
2

I eventually got the menu working but again I’m having problems in PC browsers - it seems to be in all PC browsers, Firefox and IE.

The problem is a gap between the button and the drop down part of the menu. On Mac browsers the gap isn’t there but is on PC ones

Here is the drop down menu with images of it in Mac and PC browsers.

http://www.ttmt.org.uk/


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

	<title>untitled</title>
	<style type="text/css" >
	 #nav, #nav ul{
	   padding:0;
	   margin:0;
	   list-style:none;
	 }
	 #nav{
	   margin:50px;
	 }
	 #nav a{
	   display:block;
	 }
	 #nav li{
	   float:left;
	   width:7em;
	 }
	 #nav li ul{
	   position:absolute;
	   width:7em;
	   left:-999em;
	   background:#3a8f99;
	   margin-top:24px;
	   margin-left:3px;
	   padding:5px 0;
	 }
	 #nav li:hover ul{
	   left:auto;
	 }
	 #name{
	   overflow:hidden;
	   background:#4bb9c6;
	 }
	 #nav #courses{
	   background:url(courses.gif) no-repeat 0 0;
	   width:83px;
	   height:41px;
	 }
	 #nav #courses:hover{
	   background-position:bottom left;
	 }
	 #nav #courses a{
	   text-indent:-999em;
	 }
	 #nav ul li a{
	   font-size:85%;
	   text-indent:0 !important;
	   padding:5px 10px;
	   margin:2px 5px;
	   color:#fff;
	   
	 }
	 #nav ul li a:hover{
 	   background:white;
 	   text-decoration:none;
 	   color:#e25814;
 	 }
 	 
 	 #bottom{
 	   position:absolute;
 	   bottom:0;
 	   width:100%;
 	 }
 	 #bottom #pc{
 	   float:left;
 	   width:400px;
 	 }
	</style>
</head>

<body>
  <div id="name">
    <ul id="nav">
      <li id="courses"><a href="#">courses</a>
        <ul>
          <li><a href="http://www.google.com">One</a></li>
          <li><a href="http://www.bbc.com">Two</a></li>
          <li><a href="http://www.itv.com">Three</a></li>
          <li><a href="http://www.akqa.com">24</a></li>
        </ul>
      </li>
    </ul>
  </div><!-- #name -->
  
  <div id="bottom">
    <div id="pc">
      <p>PC</p>
      <img src="pc.png" />
    </div><!-- #pc -->
    <div id="mac">
      <p>Mac</p>
      <img src="mac.png" />
    </div><!-- #mac -->
  </div><!-- #bottom -->
</body>
</html>
3

I also have the problem in mac, did you change anything?

ps: what do you float the li elements in the submenu? You don’t need floats if elements are positioned under each other.

4

johnny.dacu, thanks for your reply. I realized I had to do that and that’s what I was trying to do with the code below.

The only way I could remove the images from the drop down part of the menu was to use !important - I thought there would of been a better way to do this.


#headercontent #mainNav li ul a{
      color:#fff;
      text-indent:0;
      background: #3a8f99 !important;
    }
5

You need to rewrite the css for the inner elements. Now they are inherit the style form the parent.