css drop down menu not working in i.e 7

I have this menu which works fine in firefox etc but just will not work in I.E 7 can anyone tell me why?

<html>
<head>
<title></title>
<style type="text/css">
#mainmenu{
 width: auto;
 height: 30px;
}
#mainmenu{
 margin: 0px;
 padding: 0px;
 z-index: 1;
}
#mainmenu li{
 float:left;
 position:relative;
 width: 140px;
 border: 0px solid #fff;
 list-style: none;
 background: #336699;
 font-family: verdana;
 font-weight: bold;
 font-size: 14px;
 padding: 3px 10px 3px 10px;
}
#mainmenu li a{
 background: #336699;
 text-decoration: none;
 color: #000;
}
#mainmenu li a:hover{
 color: #ff0000;
}
#mainmenu li ul{
 display:none;
 position:absolute;
 margin: 0px;
 width: 140px;
 padding: 0px;
 list-style: none;
 top: 20px;
 left: 0;
 z-index: 2;
}
#mainmenu li:hover ul {
 display: block;
 width: 140px;
}
#mainmenu .drop {
background: #fff;
border-left: 1px solid #000;
border-right: 1px solid #000;
border-bottom: 1px dashed #000;
}
#mainmenu .drop a{
background: #fff;
}
#mainmenu .dropb {
background: #fff;
border-left: 1px solid #000;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
}
#mainmenu .dropb a{
background: #fff;
}
#mainmenu .dropt {
background: #fff;
border-top: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
border-bottom: 1px dashed #000;
}
#mainmenu .dropt a{
background: #fff;
}


</style>
</head>

<body>
<div id="mainmenu">
	<li>
		<a href="#">MENU 1</a>
		<ul>
			<li class="dropt"><a href="#">DROP DOWN 1</a></li>
			<li class="drop"><a href="#">DROP DOWN 2</a></li>
			<li class="dropb"><a href="#">DROP DOWN 3</a></li>
		</ul>
	</li>
	<li>
		<a href="#">MENU 2</a>
		<ul>
			<li><a href="#">DROP DOWN 1</a></li>
			<li><a href="#">DROP DOWN 2</a></li>
			<li><a href="#">DROP DOWN 3</a></li>
		</ul>
	</li>
	<li>
		<a href="#">MENU 3</a>
		<ul>
			<li><a href="#">DROP DOWN 1</a></li>
			<li><a href="#">DROP DOWN 2</a></li>
			<li><a href="#">DROP DOWN 3</a></li>
		</ul>
	</li>
</div>

</body>
</html>

shadiadiph

Junior Poster

117 posts since Apr 2008

Reputation Points: 10

Solved Threads: 0

3 Years Ago

Hi,

download this file and place with html page
http://www.xs4all.nl/~peterned/htc/csshover3.htc

and add this style in css

body
{ 
      behavior: url("csshover3.htc"); 
}

you menu will work in IE and FireFox

hope this will help you
Rahul Dev Katarey

katarey

Junior Poster

167 posts since Jul 2005

Reputation Points: 39

Solved Threads: 23

3 Years Ago

I believe the reason for this malfunction is because they don't support li:hover, so downloading that behavior is probably your best bet.

ccube921

Junior Poster in Training

93 posts since Oct 2008

Reputation Points: 13

Solved Threads: 6

3 Years Ago

I resolved the problem a much easier way I.E 7 requires that you have a doc heading or it will not work I just simply added

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

and it works fine in both I.E and Firefox but now I have a new problem I have added a flyout menu it works fine in I.E 7 but not in Firefox?? I just tried this one with the behaviour htc and that doesn't work. :(

any ideas?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 4.01 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">

#mainmenu{
 width: auto;
 height: 30px;
}
#mainmenu{
 margin: 0px;
 padding: 0px;
}

#mainmenu li{
 float:left;
 position:relative;
 width: 140px;
 border: 1px solid #000;
 list-style: none;
 background: #336699;
 font-family: verdana;
 font-size: 14px;
 font-weight: bold;
 text-align: center;
 padding: 3px 10px 3px 10px;
}
#mainmenu li a{
 background: #336699;
 text-decoration: none;
 color: #000;
}
#mainmenu li a:hover{
 color: #ff0000;
}
.nav1{
width: 140px;
margin: 0px;
padding: 0px;
}
#mainmenu li ul.nav1{
 display:none;
 position:absolute;
 list-style: none;
 top: 23px;
 left: 0;

}
#mainmenu li:hover ul.nav1{
 display: block;
 width: 140px;
}

#mainmenu li ul.nav1 li {
 background: #fff;
 text-decoration: none;
 font-size: 11px;
 font-weight: none;
}
#mainmenu li ul.nav1 li a{
 background: #fff;
 text-decoration: none;
 font-size: 11px;
 font-weight: none;
 color: #000;

}
#mainmenu li ul.nav1 li a:hover{
 color: #ff0000;
}

#mainmenu li ul.nav1 li ul.nav2 li{
 font-size: 8px;
 font-weight: none; 
 color: #fffab8;
}
#mainmenu li ul.nav1 li ul.nav2 li a{
 color: #000;
}
#mainmenu li ul.nav1 li ul.nav2 li a:hover{
 color: #ff0000;
}


#mainmenu ul.nav1 li ul.nav2{
 display:none;
 position:absolute;
 list-style: none;
 top: -1px;
 left: 120px;

}
#mainmenu ul.nav1 li:hover ul.nav2{
 display: block;
 width: 140px;
}

</style>
</head>

<body>

<div id="mainmenu">
     
	<li>
		<a href="#">MENU 1</a>
		<ul class="nav1">
			<li><a href="#">DROP DOWN 1</a></li>

            <ul class="nav2">
			<li><a href="#">FLY OUT 1</a>
			<li><a href="#">FLY OUT 2</a>
            </ul>
			<li><a href="#">DROP DOWN 2</a></li>
			<li><a href="#">DROP DOWN 3</a></li>
		</ul>
	</li>
	<li>
		<a href="#">MENU 2</a>
		<ul class="nav1">
			<li><a href="#">DROP DOWN 1</a></li>
			<li><a href="#">DROP DOWN 2</a></li>
			<li><a href="#">DROP DOWN 3</a></li>
		</ul>
	</li>
	<li>
		<a href="#">MENU 3</a>
		<ul class="nav1">
			<li><a href="#">DROP DOWN 1</a></li>
			<li><a href="#">DROP DOWN 2</a></li>
			<li><a href="#">DROP DOWN 3</a></li>
		</ul>
	</li>
</div>

</body>
</html>

shadiadiph

Junior Poster

117 posts since Apr 2008

Reputation Points: 10

Solved Threads: 0

3 Years Ago

In order to get this work in both i.e and mozilla i have gone and got my document to validate 100% on w3c org to their validation standatds problem is i have had to add an additional set of tags which is creating an unwated list element but without it doesn't work in both browers. Can anyone think of a fix for this?
here is my code it is obvious that where the list is doesnt make sense but it valitates therefore the menu works but not properly because of the additional space???

validates in html and css without the opening tag doesn't validate I am lost here.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<title></title>
<style type="text/css">

#mainmenu{
 width: auto;
 height: 30px;
}
#mainmenu{
 margin: 0px;
 padding: 0px;
}

#mainmenu li{
 float:left;
 position:relative;
 width: 140px;
 border: 1px solid #000;
 list-style: none;
 background: #336699;
 font-family: verdana;
 font-size: 14px;
 font-weight: bold;
 text-align: center;
 padding: 3px 10px 3px 10px;
}
#mainmenu li a{
 background: #336699;
 text-decoration: none;
 color: #000;
}
#mainmenu li a:hover{
 color: #ff0000;
}
.nav1{
width: 140px;
margin: 0px;
padding: 0px;
}
#mainmenu li ul.nav1{
 display:none;
 position:absolute;
 list-style: none;
 top: 23px;
 left: 0;

}
#mainmenu li:hover ul.nav1{
 display: block;
 width: 140px;
}

#mainmenu li ul.nav1 li {
 background: #fff;
 text-decoration: none;
 font-size: 11px;
}
#mainmenu li ul.nav1 li a{
 background: #fff;
 text-decoration: none;
 font-size: 11px;
 color: #000;

}
#mainmenu li ul.nav1 li a:hover{
 color: #ff0000;
}

#mainmenu li ul.nav1 li ul.nav2 li{
 font-size: 8px;
 color: #fffab8;
}
#mainmenu li ul.nav1 li ul.nav2 li a{
 color: #000;
}
#mainmenu li ul.nav1 li ul.nav2 li a:hover{
 color: #ff0000;
}


#mainmenu ul.nav1 li ul.nav2{
 display:none;
 position:absolute;
 list-style: none;
 top: -1px;
 left: 120px;

}
#mainmenu ul.nav1 li:hover ul.nav2{
 display: block;
 width: 140px;
}

</style>
</head>

<body>

<div id="mainmenu">
     
<ul>	
      <li>
		<a href="#">MENU 1</a>
		<ul class="nav1">
		<li><a href="#">DROP DOWN 1</a></li>
<li>
           <ul class="nav2">
			<li><a href="#">FLY OUT 1</a></li>
			<li><a href="#">FLY OUT 2</a></li>
            </ul>
</li>
			<li><a href="#">DROP DOWN 2</a></li>
			<li><a href="#">DROP DOWN 3</a></li>
		</ul>
	</li>
	<li>
		<a href="#">MENU 2</a>
		<ul class="nav1">
			<li><a href="#">DROP DOWN 1</a></li>
			<li><a href="#">DROP DOWN 2</a></li>
			<li><a href="#">DROP DOWN 3</a></li>
		</ul>
	</li>
	<li>
		<a href="#">MENU 3</a>
		<ul class="nav1">
			<li><a href="#">DROP DOWN 1</a></li>
			<li><a href="#">DROP DOWN 2</a></li>
			<li><a href="#">DROP DOWN 3</a></li>
		</ul>
	</li>
</ul>
</div>

</body>
</html>

shadiadiph

Junior Poster

117 posts since Apr 2008

Reputation Points: 10

Solved Threads: 0

3 Years Ago

solved it by removing a few tags

shadiadiph

Junior Poster

117 posts since Apr 2008

Reputation Points: 10

Solved Threads: 0

3 Years Ago

also you can use the css sprite nav that uses the javascript sfhover function, google and youll see it.

cmills83

Posting Whiz in Training

249 posts since Jun 2004

Reputation Points: 37

Solved Threads: 1

3 Years Ago

.leftnav {
	padding-top:244px;
	width:188px;
	padding-left:12px;
	color:#000000;
	font-family:Arial;
	font-weight:bold;
	float:left;
	clear:both;
}
.leftheading {
	background-image: url(../images/rightstyle.jpg);
	width:178px;
	height:30px;
	padding-top:5px;
	padding-left:10px;
	background-repeat:no-repeat;
	color:#FFFFFF;
	font-family:Arial;
	font-weight:bold;
	z-index:10;
}
ul.menu1, ul ul {
	float:left;
	clear:both;
	padding:0; 
	margin:0;
	bottom:20px;
	border:0; 
	list-style-type:none; 	
	overflow:hidden; 
	background:#ffe6a3; 
	width:178px; 
	text-align:left;
	font-size:10pt; 
	color:#000000; 
	border:0;
}
ul.menu1 table {
	border-collapse:collapse; 
	padding:0; margin:0; 
	font-size:1em;
}
ul.menu1 ul {
	margin-left:1em;
}
ul.menu1 li {
	text-indent:10px;
}
ul.menu1 li.drop {
	margin-bottom:-2px;
}
ul.menu1 li a,ul.menu1 li a:visited {
	display:block; 
	width:178px; 
	height:2em; 
	line-height:1.2em; 
	text-decoration:none;
	color:#000000;
}
ul.menu1 li a.last, 
ul.menu1 li a.last:visited {
	display:block; 
	width:178px;; 
	line-height:1.2em;
}
ul.menu1 li ul {
	display:none;
}
ul.menu1 li:hover a,ul.menu1 li a:hover {
	border:0; 
	color:#000000;
	font-weight:bold;
}
ul.menu1 li:hover ul, 
ul.menu1 li a:hover ul {
	display:block; 
	width:168px;; 
	margin-top:-1px;
}
ul.menu1 li:hover ul li a, 
ul.menu1 li a:hover ul li a {
 	background:#ffe6a3; 
	color:#a51f17;
	font-weight:bold;
}
ul.menu1 li:hover ul li:hover a, 
ul.menu1 li a:hover ul li a:hover {
	background:#ffe6a3;
	color:#000000;
}
.maincontent {
	float:left;
	position:absolute;
	top:244px;
	padding-left:215px;
	width:618px;
	font-family:Arial;
	font-weight:normal;
	font-size:10pt;
	clear:both;
}

Html -:

<div class="maincontent">
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
</div>
<div class="leftnav">
<div style="background-color:#ffe6a3;width:188px;min-height:600px;bottom:20px;">
<div class="leftheading">Participants</div>
<ul class="menu1">
<li class="drop"><a href="#">Growers<!--[if IE 7]><!--></a><!--<![endif]--><table><tr><td>
	<ul>
	<li><a href="#">Grower Profile</a></li>
	<li><a href="#">2</a></li>
	<li><a href="#">3</a></li>
	<li><a href="#">4</a></li>
	</ul>
	</td></tr></table><!--[if lte IE 6]></a><![endif]-->
</li>
<li class="drop"><a href="#">ColorStars<!--[if IE 7]><!--></a><!--<![endif]--><table><tr><td>
	<ul>
	<li><a href="#">1</a></li>
	<li><a href="#">2</a></li>
	<li><a href="#">3</a></li>
	<li><a href="#">4</a></li>
	</ul>
	</td></tr></table><!--[if lte IE 6]></a><![endif]-->
</li>
<li class="drop"><a href="#">Rules<!--[if IE 7]><!--></a><!--<![endif]--><table><tr><td>
	<ul>
	<li><a href="#">1</a></li>
	<li><a href="#">2</a></li>
	<li><a href="#">3</a></li>
	<li><a href="#">4</a></li>
	</ul>
	</td></tr></table><!--[if lte IE 6]></a><![endif]-->
</li>

<li class="drop"><a href="#">FAQs<!--[if IE 7]><!--></a><!--<![endif]--><table><tr><td>
	<ul>
	<li><a href="#">1</a></li>
	<li><a href="#">2</a></li>
	<li><a href="#">3</a></li>
	<li><a href="#">4</a></li>
	</ul>
	</td></tr></table>

</ul>
</div></div>

gurshan

Newbie Poster

15 posts since Dec 2008

Reputation Points: 20

Solved Threads: 1

1 Week Ago

behavior: url("csshover3.htc");
it works.
thank you

jayesh123

Newbie Poster

1 post since May 2012

Reputation Points: 0

Solved Threads: 0

You