Hi I'm having a big problem with my nav menu in ie6, I don't know if the problem is a css problem or not, but I hope to find out this is my html code:
site link
http://geocities.com/ubuntu_joy/
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="css.css" />
<title></title>
<!--[if lt IE 7]>
<style type="type/css">
ul.menu ul {
left: 220px;
}
</style>
<script src="/ie7/ie7-standard-p.
js" type="text/javascript">
IE7_PNG_SUFFIX = "arrow.png";
</script>
<script src="/ie7/ie7-recalc.
js" type="text/javascript"></script>
<![endif]-->
<!--[if lt IE 6]>
<style type="text/css">
ul.menu span {
margin-left: -15px;
padding-left: 15px;
}
</style>
<![endif]-->
<script src="cssQuery/cssQuery-p.
js" type="text/javascript"></script>
<script src="drop_down_menus.
js" type="text/javascript"></script>
<noscript>
<style type="text/css">
ul.menu li:hover > ul {
visibility: visible;
}
</style>
</noscript>
</head>
<body>
<div class="mainpage">
<div class="mainpagetop"></div>
<div class="banner">
<img src="Images/banner2.png" />
</div>
<div class='menu'><div>
<ul class='menu'>
<li class='menu' id='menu-0'>
<span>Wrox P2P</span><span class='arrow'></span>
<div class='menu'><div>
[list]
<li>
<a href='http://p2p.wrox.com/forum.asp?FORUM_ID=151'>
<span>Beginning CSS: Cascading Style Sheets for Web Design</span>
</a>
</li>
<li>
<a href='http://p2p.wrox.com/forum.asp?FORUM_ID=143'>
<span>CSS</span>
</a>
</li>
<li>
<a href='http://p2p.wrox.com/html-code-clinic-90/'>
<span>HTML Code Clinic</span>
</a>
</li>
</ul>
</div></div>
</li>
<li><a href='http://www.google.com'><span>Google</span></a></li>
<li class='menu' id='menu-1'>
<span>Mozilla</span><span class='arrow'></span>
<div class='menu'><div>
[list]
<li>
<a href='http://www.mozilla.org/products/firefox'>
<span>Firefox</span>
</a>
</li>
<li>
<a href='http://www.mozilla.org/products/thunderbird'>
<span>Thunderbird</span>
</a>
</li>
<li>
<a href='http://bugzilla.mozilla.org'>
<span>Bugzilla</span>
</a>
</li>
</ul>
</div></div>
</li>
<li class='menu' id='menu-2'>
<span>Apple</span><span class='arrow'></span>
<div class='menu'><div>
[list]
<li class='menu' id='menu-3'>
<span>Safari</span><span class='arrow'></span>
<div class='menu'><div>
[list]
<li>
<a href='http://webkit.opendarwin.org'>
<span>Webkit Open Source Project</span>
</a>
</li>
<li>
<a href='http://webkit.opendarwin.org/blog/'>
<span>Surfin Safari</span>
</a>
</li>
</ul>
</div></div>
</li>
<li>
<a href='http://www.apple.com/macosx'>
<span>Mac OS X</span>
</a>
</li>
<li>
<a href='http://www.apple.com/itunes'>
<span>iTunes</span>
</a>
</li>
</ul>
</div></div>
</li>
<li class='menu' id='menu-4'>
<span>Microsoft</span><span class='arrow'></span>
<div class='menu'><div>
[list]
<li>
<a href='http://blogs.msdn.com/ie'>
<span>Internet Explorer Blog</span>
</a>
</li>
<li>
<a href='http://channel9.msdn.com/wiki/default.aspx/Channel9.InternetExplorerFeedback'>
<span>Internet Explorer Wiki</span>
</a>
</li>
</ul>
</div></div>
</li>
<li class='menu' id='menu-6'>
<span>W3C</span><span class='arrow'></span>
<div class='menu'><div>
[list]
<li>
<a href='http://validator.w3.org'>
<span>W3C Markup Validation Service</span>
</a>
</li>
<li>
<a href='http://jigsaw.w3.org/css-validator/'>
<span>W3C CSS Validation Service</span>
</a>
</li>
<li>
<a href='http://www.w3.org/TR/CSS21/'>
<span>CSS 2.1 Specification</span>
</a>
</li>
<li>
<a href='http://www.w3.org/Style/CSS/current-work'>
<span>CSS 3</span>
</a>
</li>
</ul>
</div></div>
</li>
<li class='menu' id='menu-7'>
<span>Other</span><span class='arrow'></span>
<div class='menu'><div>
[list]
<li>
<a href='http://www.quirksmode.org'>
<span>Peter-Paul Koch's Quirksmode.org</span>
</a>
</li>
<li>
<a href='http://www.meyerweb.com'>
<span>Eric A. Meyer</span>
</a>
</li>
<li>
<a href='http://www.alistapart.com'>
<span>A List Apart</span>
</a>
</li>
<li>
<a href='http://www.positioniseverything.net'>
<span>Position is Everything</span>
</a>
</li>
<li>
<a href='http://annevankesteren.nl'>
<span>Anne's Weblog About Markup and Style</span>
</a>
</li>
<li>
<a href='http://dean.edwards.name'>
<span>Dean Edwards</span>
</a>
</li>
<li>
<a href='http://www.csszengarden.com'>
<span>CSS Zen Garden</span>
</a>
</li>
</ul>
</div></div>
</li>
</ul>
</div></div>
<div class="mainpagebottom"></div>
</div>
</body>
</html>
and this is the css:
body {
background-color: #5A6036;
padding: 0;
margin: 0;
font: 16px sans-serif;
}
div.menu {
margin-left: 20px;
}
div.menu,
li.menu div {
width: 180px;
background: transparent url('Images/transparent_01.gif') no-repeat top;
}
div.menu > div,
li.menu > div > div {
width: 180px;
background: transparent url('Images/transparent_03.gif') no-repeat bottom;
padding: 30px 0 30px 0;
}
ul.menu a {
color: white;
text-decoration: none;
width: 100%;
display: inline-block;
height: 100%;
position: relative;
}
ul.menu,
ul.menu ul {
background: transparent url('Images/transparent_02.gif') repeat-y center;
list-style: none;
padding: 0;
margin: 0;
width: 180px;
}
li.menu > div {
position: absolute;
top: -20px;
left: 180px;
visibility: hidden;
z-index: 4;
width: 180px;
}
ul.menu li {
position: relative;
padding: 2px;
}
ul.menu li:hover,
li.menu-highlight,
li.menu-link-highlight {
background: transparent url('Images/highlight_02.gif') repeat-y center;
}
ul.menu span {
display: block;
padding: 2px 15px;
}
li.menu > span.arrow {
position: absolute;
width: 15px;
height: 15px;
top: 5px;
right: 15px;
background: url('arrow.png') no-repeat right;
border: none;
padding: 0;
problem with my menu in ie6
