css drop down menu in IE6 does not float.

**since** · 12-08-2009, 09:25 AM

I am trying to implement a drop down menu. I have it working in IE8 and firefox but not IE6.
It seems that the drop down menu is pushing the subsequent content out and floating over it.
I am using the crossover.htc from "http://www.xs4all.nl/~peterned/htc/csshover3.htc"

Question.
How do I get a drop down menu to float in IE6?

Any help would be greatly appreciated.
Steve

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<style type="text/css" media="screen">
.menuContainer *
{
    PADDING: 0;
    MARGIN: 0;
}

.menuContainer
{
    BACKGROUND: #52842d ;
    HEIGHT: 45px;
}

.menuContainer .left
{
    FLOAT: left;
}

.menuContainer .right
{
    FLOAT: right;
}

.menuh
{
    MARGIN: 0px 9px 0px 10px;
    PADDING-TOP: 4px
}

.menuh ul
{
    LIST-STYLE-TYPE: none;
    float:left;
    BORDER-LEFT:  #80aa66 1px solid;
    HEIGHT: 37px;
    width:8em;
}

.menuh li
{
   position:relative;
   min-height: 1px;		/* Sophie Dennis contribution for IE7 */
   vertical-align: bottom;	/* Sophie Dennis contribution for IE7 */
}

.menuh a
{
    display: block;
    text-align: center;
    PADDING-RIGHT: 10px;
    PADDING-LEFT: 10px;
    FONT-SIZE: 12px;
    COLOR: white;
    PADDING-TOP: 10px;
    PADDING-BOTTOM: 13px;
}

.menuh ul ul a:link, .menuh ul ul a:visited, ul ul .menuh a:active	/* menu at rest */
{
  color: white;
}

.menuh ul ul a:hover 
{
  color: white;
}

.menuh a:hover
{
   background: #52842d ;
}

.menuh ul ul
{
   position: relative;
   z-index:500;
   display:none;
   BORDER: 0px;
   background: #52842d ;
}

.menuh ul ul a
{
   top:0;
   display:block;
   padding:0;
   text-align: left;
   padding-left: 12px;
}

.menuh li:hover
{
  z-index:100;
}

.menuh li:hover ul ul,
.menuh li li:hover ul ul,
.menuh li li li:hover ul ul,
.menuh li li li li:hover ul ul
{display:none;}

.menuh li:hover ul,
.menuh li li:hover ul,
.menuh li li li:hover ul,
.menuh li li li li:hover ul
{display:block;}
</style>

<!--[if lt IE 7]>
<style type="text/css" media="screen">
 .menuh{float:none;}
  body{behavior:url(./js/csshover3.htc); font-size:100%;}
 .menuh ul li{float:left; width: 100%;}
 .menuh ul li a {height:1%;}
 .menuh {margin: 0;}

 /*.menuh a{height:1%;font:bold 0.7em/1.4em arial, sans-serif;} */
</style>
<![endif]-->

</head>
<body>
<div class="menuContainer">
   <div class="menuh">
     <ul>
        <li><a href="#">Scenario</a><ul>
          <li><a href="#">New</a></li><li><a href="#">Import</a></li></ul></li></ul>
     <ul>
        <li><a href="#">Controller</a><ul>
           <li><a href="#">New</a></li><li><a href="#">Import</a></li></ul></li></ul>
   </div>
</div>
<div style="background:red;display:block">
  hello
</div>
</body>
</html>

**the penguin** · 12-08-2009, 07:13 PM

Rather than wrapping your head around IE6 and its intricacies, I recommend using an already made cross-browser multi level menu and styling it to your choice. You would achieve this much faster than debugging your crossover menu.

Trust me. I debug for IE6 constantly.

Use the below menu. It's robust and very flexible.

http://www.dynamicdrive.com/style/cs...el_css_menu_2/

**since** · 12-09-2009, 09:01 AM

thx. I will take a look. I was able to get it to work. IE6 is a little quirky. The div wrapper needed to have "position:absolute" to prevent the following content from being displaced.

Code:

.menuh
{
    position:absolute;
    MARGIN: 0px 9px 0px 10px;
    PADDING-TOP: 4px
}

Steve

Thread: css drop down menu in IE6 does not float.

Thread Tools

Search Thread

css drop down menu in IE6 does not float.

Bookmarks

Bookmarks

Posting Permissions