Log in

View Full Version : 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


<!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/csslibrary/item/jquery_multi_level_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.


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




Steve