Forum Moderators: not2easy
I've put together a drop down CSS menu. It works fine in Firefox but when I view it in Internet Explorer it doesn't work at all- any suggestions. The code for the page is displayed below:
<html>
<head>
<title>Blastbeat</title>
<style>
body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
}
ul{
padding: 0;
margin: 0;
list-style: none;
}
li {
float: left;
position: relative;
width: 10em;
height: 2em;
color: #FFFFFF;
background: #BF0000;
padding: 5px;
border: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
li ul {
display: none;
position: absolute;
top: 1em;
left: 0;
}
li > ul {
top: auto;
left: auto;
}
li:hover ul, li.over ul{ display: block; }
clear: left
a:link {
color: #FFFFFF;
text-decoration: none;
}
a:visited {
color: #FFFFFF;
text-decoration: none;
}
a:hover {
color: #FFFFCC;
text-decoration: none;
}
a:active {
text-decoration: none;
}
a:link {
color: #FFFFFF;
text-decoration: none;
}
body {
background-color: #000000;
}
</style>
</head>
<body>
<li>
<a href="http://www.blastbeat.org">Home</a></li>
<li><a href="#">Mini-company Competition</a>
<ul>
<li><a href="http://www.blast.ie">About</a></li>
<li><a href="#">Teachers</a></li>
<li><a href="#">Students</a></li>
<li><a href= "#">League Table</a></li>
<li><a href= "#">Assessment details</a></li>
<li><a href= "#">Terms and Conditions</a></li>
<li><a href= "#">Tips and Advice</a></li>
<li><a href="#">Sponsers</a></li>
<li><a href="#">Contact Blastbeat</a></li>
</ul>
</li>
<li><a href="#">Mini Companies</a>
</li>
<li><a href="#">Band Competition</a>
<ul id="nav">
<li><a href="#">Information for Bands</a></li>
<li><a href="#">Upcoming events</a></li>
<li><a href="#">Blastbeat bands</a></li>
<li><a href="#">Blastbeat Music</a></li>
</ul>
</li>
<li><a href="#">News</a>
<ul id="nav">
<li><a href="#">Current news</a></li>
<li><a href="#">Archived news</a></li>
</ul>
</li>
<li>Media
<ul id="nav">
<li><a href="#">Blastbeat Music</a></li>
<li><a href="#">Blastbeat Promo Video</a></li>
</ul>
</li>
</ul>
</ul>
</body>
</html>
[htmldog.com...]
Suckerfish is the best way for cross-browser goodness.
"
li > ul {
top: auto;
left: auto;
}
li:hover ul, li.over ul{ display: block; }
clear: left
"
I don't see how this would work in any browser, let alone a less tolerant one than IE... are you sure about that?
Edit: On second review, your code is extremely messy. This was obviously not written by hand, correct?
In your HTML you have multiple instances of IDs... IDs can only be used for one element. That mistake alone should render your menu FUBAR in any browser. You also have a whole web of <li>'s going... if all of those tags actually do match up, it certainly is/will be difficult to make any kind of progress or changes within this code.
This code can't possibly work in Firefox or any other browser; but then I don't know what page you're looking at, or what your definition of "working" is. If you just pasted this from whatever WYSIWYG Editor, then it's understandable... though it appears you may have attempted to go into the code side to rework some things.
