I have developed a generic list-based css menu. It works both in IE7 and
Firefox, and with the help of Peter Nederlof's csshover.htc, with older
IE versions.
I have included a simplified version below. The list goes something like
this:
<ul class="menu">
<li>Menu 1
<ul> <li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
<li>Menu 2
<ul> <li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
</ul>
The question is this: my style for the nested ul includes
position: absolute;
Firefox positions the ul below the li, while IE7 positions it to its
right. Using position: relative positions them both correctly, but
destroys the menu effect.
Is there a trick to getting IE7 to position the ul below the li?
Below is the code I am using.
Thanks
Mark
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Menu</title>
<style type="text/css">
/* Essential */
.break { clear: left; }
.menu li { display: block; /* FireFox */ float: left; }
.menu li ul { position: absolute; display: none; }
.menu li ul li { float: none; display: block; }
.menu li:hover ul { display: block; }
.menu a { display: block; /* Firefox Only */ }
/* Visual */
.menu li {
background-color: lightblue;
padding: 4px;
border: solid 1px;
font-family: sans-serif;
}
.menu li ul {
padding-left: 0px; /* FireFox */
margin-left: 0px; /* IE */
border: solid 1px;
margin: 4px 0px 0px -5px;
}
.menu li ul li {
padding: 0px; border: 0px;
}
.menu li:hover {
background-color: pink;
}
.menu a {
text-decoration: none;
}
</style>
</head>
<body>
<h1 class="intro">Menu</h1>
<ul class="menu">
<li>JavaScript
<ul><li><a href="#">Web Developers Notes</a></li>
<li><a href="#">DevGuru</a></li>
<li><a href="#">QuirksMode</a></li>
<li><a href="#">World Wide Web Consortium</a></li>
<li><a href="#">XML.com</a></li>
<li><a href="#">W3Schools</a></li>
<li><a href="#">How to Create</a></li>
<li><a href="#">Mozilla: Using Web Standards</a></li>
<li><a href="#">JavaScript Kit</a></li>
</ul>
</li>
<li>Browsers
<ul><li><a href="#">Mozilla Firefox</a></li>
<li><a href="#">NetScape</a></li>
<li><a href="#">Opera</a></li>
<li><a href="#">Apple Safari</a></li>
<li><a href="#">Old Internet Explorer</a></li>
</ul>
</li>
</ul>
<div class="break">etc etc etc etc etc</div>
</body>
</html>
