css drop down menu not working in i.e 7

Question

shadiadiph 0 Junior Poster

17 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
305 Views
3 Years Discussion Span
Latest Post 14 Years Ago Latest Post by jayesh123

Dani AI

Generated 9 Months Ago

A few practical notes and fixes that clarify what happened in this thread and make the menu robust across browsers and future changes.

Missing or invalid document/markup was the primary culprit: when a page renders in quirks mode older IEs fall back to non‑standard behavior (which explains why ’s DOCTYPE change fixed the original problem). Invalid nesting (top‑level <li> children not inside a <ul>/<ol>, stray <li> tags) will also produce different results between engines — removing those stray items fixed the layout for . and correctly pointed out polyfills/behavior fixes, but a more maintainable approach is to keep markup valid and add a tiny JS fallback for older or touch devices.

Quick checklist to verify

Confirm the nav uses a semantic list: a <ul> (or <nav><ul>) with each submenu as a nested <ul> inside its parent <li>.
Make anchors the clickable element and set them to display: block so the whole menu cell is active.
Give parent <li> position: relative and submenus position: absolute; avoid overflow: hidden on ancestor elements that would clip submenus.
Validate HTML (W3C) and use DevTools to check Document Mode / computed styles.
For legacy IE rendering quirks consider forcing "hasLayout" on the element (e.g., a layout trigger) or use a small JS fallback rather than brittle HTC files.

Small robust pattern (CSS + tiny JS fallback)

<nav><ul class="menu"> ...nested <li> / <ul> correctly... </ul></nav>

.menu a { display:block; }
.menu ul { display:none; position:absolute; }
.menu li.open > ul { display:block; }

// unobtrusive toggle for click/touch (works where :hover is unreliable)
document.querySelectorAll('.menu > li > a').forEach(function(link){
  link.addEventListener('click', function(e){
    e.preventDefault();
    this.parentNode.classList.toggle('open');
  });
});

Accessibility and maintenance note: prefer keyboard support (toggle on Enter/Space), use ARIA roles if needed, and keep progressive enhancement—CSS-only for modern browsers, JS to polyfill behaviour where :hover or native support is inconsistent. This approach keeps the menu predictable across browsers and avoids fragile, browser‑specific hacks.

All 8 Replies

katarey 27 Junior Poster

17 Years Ago

Hi,

download this file and place with html page

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

17 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

17 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

css drop down menu not working in i.e 7

Dani AI

Recommended Answers Collapse Answers

All 8 Replies

Recommended Answers