css drop down menu not working in i.e 7

Question

shadiadiph 0 Junior Poster

15 Years Ago

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>

html-css web-design

6 Contributors
8 Replies
270 Views
3 Years Discussion Span
Latest Post 12 Years Ago Latest Post by jayesh123

katarey 27 Junior Poster

15 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

ccube921 2 Junior Poster in Training

15 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.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

shadiadiph 0 Junior Poster · Answer 1 · 2009-02-06T09:13:33+00:00

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 0 Junior Poster · Answer 2 · 2009-02-06T10:34:05+00:00

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 <li> 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 <ul> 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 0 Junior Poster · Answer 3 · 2009-02-06T11:23:46+00:00

shadiadiph 0 Junior Poster

15 Years Ago

solved it by removing a few <li> tags

cmills83 8 Posting Whiz in Training · Answer 4 · 2009-02-12T05:15:35+00:00

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

gurshan 10 Newbie Poster · Answer 5 · 2009-02-12T17:26:21+00:00

.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>

jayesh123 0 Newbie Poster · Answer 6 · 2012-05-20T07:30:00+00:00

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