Please could someone help? This works perfectly with Safari, Firefox and Chrome but NOT in Explorer and I have no clue why.
Thanks much.
<HEAD>
<body link="#FFCC66" vlink="#FFCC66" topmargin="5" alink="#FFCC66" style="text-align:left; background-attachment:fixed" bgcolor="#F3BC3A" leftmargin="50" background="/pictures/bg111uphbl.jpg">
<meta http-equiv="content-type" content=" "></meta>
<title>Text</title>
<meta name=" "></meta>
<style type="text/css" media="screen">
#menu {
width: 100%;
background: #eee;
float: left;
}
#menu ul {
list-style: none;
margin: 0;
padding: 0;
width: 9em;
float: left;
}
#menu开发者_开发问答 a, #menu h2 {
font: bold 11px/10px arial, helvetica, sans-serif;
display: block;
border-width: 1px;
border-style: solid;
border-color: #ccc #888 #555 #bbb;
margin: 0;
padding: 2px 3px;
}
#menu h2 {
color: #fff;
background: #000;
text-transform: uppercase;
}
#menu a {
color: #000;
background: #efefef;
text-decoration: none;
}
#menu a:hover {
color: #a00;
background: #fff;
}
#menu li {position: relative;}
#menu ul ul {
position: absolute;
z-index: 500;
}
#menu ul ul ul {
position: absolute;
top: 0;
left: 100%;
}
div#menu ul ul ul,
div#menu ul li:hover ul ul ul,
div#menu ul ul li:hover ul ul ul
{display: none;}
div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul,
div#menu ul ul ul li:hover ul ul
{display: none;}
div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul,
div#menu ul ul ul ul li:hover ul
{display: block;}
</style>
</div>
<div style="position: absolute; width: 880px; height: 50px; z-index: 1; left: 10px; top: 3px" id="layer1">
<div style="position: absolute; width: 880px; height: 600px; z-index: 1; left: -1px; top: 15px" id="layer2">
<!-- start menu HTML -->
<div id="menu" style="width: 880px; height: 20px">
<ul>
<li><h2>Text</h2>
<ul>
<li><a href="http://bricemallier.com/Menus.htm">Text</a><ul>
<li><a href="http://bricemallier.com/Menus.htm">Text</a><ul></li>
</table>
</div>
</html>
The tags in your unordered list are all out of whack, you have several opening <ul> tags and no closings, I bet if you fixed that it would fix whatever the problem is. I also just noticed you also have a closing </table> tag with no matching opening tag. You should run this code through a validator, it'll help you find a lot of these issues.
Chances are your issues stem from IE resorting to quirks mode rather than standards mode like the other browsers.
I'd highly suggest you take a minute to fix your markup, and once you have valid HTML add this doctype definition to the top of your html page (before the starting <html>
tag, which you don't actually have at the moment...)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Your code is a mess. Go through it and clean up all your tags. Its probably not working in IE because does not read badly written code as smoothly as the other browswers. Close your head tag and the body tag should go after the meta. There is also a random </div>
tag after style and a </table>
tag before the last </div>
and your <ul>
tags aren't closed properly.
Thanks everyone. I am learning but I have been successful! Please do tell me if there are still things wrong.
<title>Text</title>
<meta name="description" content="text">
<meta name="keywords" content="text">
menu {
width: 100%; background: #eee; float: left; }
menu ul {
list-style: none; margin: 0; padding: 0; width: 9em; float: left; }
menu a, #menu h2 {
font: bold 11px/10px arial, helvetica, sans-serif; display: block; border-width: 1px; border-style: solid; border-color: #ccc #888 #555 #bbb; margin: 0; padding: 2px 3px; }
menu h2 {
color: #fff; background: #000; text-transform: uppercase; }
menu a {
color: #000; background: #efefef; text-decoration: none; }
menu a:hover {
color: #a00; background: #fff; }
menu li {position: relative;}
menu ul ul {
position: absolute; z-index: 500; }
menu ul ul ul {
position: absolute; top: 0; left: 100%; }
div#menu ul ul ul, div#menu ul li:hover ul ul ul, div#menu ul ul li:hover ul ul ul {display: none;}
div#menu ul ul, div#menu ul li:hover ul ul, div#menu ul ul li:hover ul ul, div#menu ul ul ul li:hover ul ul {display: none;}
div#menu ul li:hover ul, div#menu ul ul li:hover ul, div#menu ul ul ul li:hover ul, div#menu ul ul ul ul li:hover ul {display: block;}
Text
- Test
- Test
- Test
精彩评论