CSS Drop-Down Menu

Discussion in 'CSS' started by twalters84, Aug 5, 2009.

0
  1. #1
    Greetings,

    I am trying to add a drop-down menu for my website. It appears to be working correctly in firefox. However, internet explorer seems to be giving the menu some problems.

    I have broken down the code into a simple example of what it is doing:

    Drop-Down Menu Example

    I want the menu to hover above the search bar like it does in firefox.

    Here is the code for the menu:

    

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<script type="text/javascript" src="http://www.green-watch.org/zapatec/utils/zapatec.js"></script>
<script type="text/javascript" src="http://www.green-watch.org/zapatec/zpmenu/src/zpmenu.js"></script>

<style>

body 
{
	background: #FFF url(img/jpg/bg1_2.jpg) repeat-x 0 0;
}

#wrap 
{
	margin: auto;
	text-align: left;
	width: 100%;
	position: relative;
}

#header, #search, #low-header, #menu, #body, #footer 
{
	float: none;
	margin: auto;
}

	#header 
	{
		background: url(img/gif/bg_header.gif) repeat-x 0 0;
		height: 121px; width: 100%;
		position: relative;
		background-color:#064A04;
	}
	
	#header .content
	{
		width: 795px;
		margin:auto;
	}
		
	#header .myHeaderBanner
	{
		width: 590px;
		margin: 0px 0px 0px 0px;
		padding: 0px 0px 0px 0px;
		height: 80px;
	}
		
#searchBar
{
	background: #E7E2CE;
	width: 100%;
	float: none;
	margin:auto;
	height:40px;
}	
	
#search 
{
	background: url(img/gif/bg_search.gif) no-repeat right bottom;
	height: 35px; width: 795px;
	position: relative;
	border: 1px solid #e7e2ce;
}
		
.float 
{
	float: left;
}		
			
</style>

</head> 

<body>

  <div id="wrap">
  
    <div id="header" class="float">
    
      <div class="content">
              
        <div class="myHeaderBanner"></div>

          <ul id="menu-items">
                          
          <li><a href="#">businesses</a>
                
            <ul>
                  
              <li>Menu 1.0
                   
                <ul>
                      
                  <li>Submenu 1.0</li>
                  <li>Submenu 2.0</li>
                  <li>Submenu 3.0</li>
                      
                </ul>
                    
              </li>
                    
              <li>Menu 2.0</li>
              <li>Menu 3.0</li>
              <li>Menu 4.0</li>
                  
            </ul>
               
          </li>
           
        </ul>
    
        <script type="text/javascript">
        var myMenu = new Zapatec.Menu
		({
            theme: "barblue",
            source: "menu-items"
  	    });
        </script>  
              
      </div>  
                         
    </div>
    
	<div id="searchBar" class="float">

	  <div id="search" class="float">
        		 

     
      </div>
      
    </div>
   
  </div>
 
</body>

</html>
    HTML:
    Thanks in advance for any suggestions on how to fix this problem.

    Sincerely,
    Travis Walters
     
    twalters84, Aug 5, 2009 IP
  2. TheDataPlanet.com

    TheDataPlanet.com Well-Known Member

    Messages:
    503
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    108
    #2
    The version of IE that's having the problem? Or all versions of IE?

    Use this css drop down menu instead, much simpler than yours.

    If it's IE6 that's behaving incorrectly, you probably need something called the css hover hack.
     
    TheDataPlanet.com, Aug 6, 2009 IP
  3. 1 FineLine

    1 FineLine Peon

    Messages:
    78
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #3
    using hacks is a bad idea.

    check out stu nicholls site. plenty of great css menus
     
    1 FineLine, Aug 6, 2009 IP
  4. myst_dg

    myst_dg Active Member

    Messages:
    224
    Likes Received:
    9
    Best Answers:
    0
    Trophy Points:
    58
    #4
    check out this: cssplay.co.uk/menus/final_drop.html
     
    myst_dg, Aug 6, 2009 IP