Hi,
I am new to CSS and web programming. I am fiddling with a menu to do some changes. The example that I am following is here: http://www.cssplay.co.uk/menus/snowstorm.html
The menu is working fine of FF/Chrome/Safari. On IE 6 it's broken.
Here is the complete code in html format including css and menu itself:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en-US" xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
body
{
/*behavior: url("csshover3.htc");*/
background: #a1a1a1;
font: 12px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
padding-top:0;
color: #afafaf;
width: 800px;
margin: 0 auto;
}
</style>
<style type="text/css">
.container {width:800px; height:26px;}
/* ================================================================
This copyright notice must be untouched at all times.
The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/snowstorm.html
Copyright (c) 2005-2010 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
=================================================================== */
/* default styling */
.nav,
.nav ul {list-style-type:none; margin:0; padding:0; float:left;}
.nav a {text-decoration:none;}
.nav {font:normal 12px/30px arial, verdana, sans-serif; margin-bottom:-1px;}
/* style the links */
.nav a {float:left; background:#4a4a4a;background:url(images/tabs_10.gif) repeat-x left top;color:#fff; text-align:center; line-height:30px; padding:0px 0;margin-bottom:-1px;}
.nav a.sub-a {}
.nav a:hover,
.nav a:active {outline:0; color:#000000; background:#F6C739;}
.nav a:focus {direction:ltr; outline:0;}
/* this is for the path highlight in all browsers except IE6 and lower */
.nav li:hover > a {color:#000000; background:#F6C739;font-weight:bold; }
/* WIDTH change this WITH CARE to suit your requirements */
.nav {width:160px; margin-right:0px;}
.nav a {width:160px; margin-right:-159px;} /* take into account the borders when calculating the link width, margin-right = total link width - 1px */
.nav ul li {max-width:160px;} /* fix for IE8 */
.nav ul li a {text-align:left;text-indent:10px;font-weight: normal; font-size: 9pt;background:#4a4a4a;}
/* flyout TOP positions */
.nav ul.fly {top:-25px;} /* position the top of the flyout first sub-limenus */
.nav ul.fly2 {top:-41px;} /* position the top of the flyout sub-limenus with previous text on two lines */
/* flyout LEFT/RIGHT positions */
.nav ul.fly {left:159px;}
.nav .left ul.fly {left:auto; right:159px;}
/* DO NOT CHANGE ANYTHING BELOW THIS LINE */
/* ---------------------------------------------------------------------------- */
.nav ul {position:relative; margin-bottom:-10000px;}
.nav ul li {float:left; clear:left;}
.nav a {position:relative;}
.sub-li {margin-top:-10000px;}
.sub-a {margin-top:10000px}
/* The bit that does ALL the work to bring the sub-limenus into view */
.sub-li a:hover,
.sub-li a:active {margin-right:0;}
/* OPERA fix */
.nav ul:hover {clear:left;}
/*IE5-7 fixes*/
.nav .sub-li {width:100%;}
a:active {}
/* ---------------------------------------------------------------------------- */
</style>
<!--[if IE]>
<style type="text/css" media="screen">
body {behavior: url(csshover3.htc);}
</style>
<![endif]-->
</head>
<body>
<div class="container">
<ul class="nav">
<li><a href="#url">Home</a></li>
</ul>
<ul class="nav">
<li class="sub-li"><a class="sub-a" href="#url">About</a>
<ul>
<li><a href="#url">overview</a></li>
<li><a href="#url">features</a></li>
</ul>
</li>
</ul>
<ul class="nav">
<li class="sub-li"><a class="sub-a" href="#url">Support</a>
<ul>
<li><a href="#url">forum</a></li>
<li><a href="#url">documentation</a></li>
<li><a href="#url">FAQs</a></li>
<li><a href="#url">contact us</a></li>
</ul>
</li>
</ul>
<ul class="nav">
<li class="sub-li"><a class="sub-a" href="#url">Media</a>
<ul>
<li><a href="#url">screenshots</a></li>
<li><a href="#url">gallery</a></li>
</ul>
</li>
</ul>
<ul class="nav">
<li class="sub-li"><a class="sub-a" href="#url">Download</a>
<ul>
<li><a href="#url">download</a></li>
<li><a href="#url">change log</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
The problems on IE 6 are: 1. When you hover on sub item, the top/root menu crashes. This is happening because of text-indent:10px; of
nav ul li a {text-align:left;text-indent:10px;font-weight: normal; font-size: 9pt;background:#4a4a4a;}
If you remove, menu is working fine but I need text to be align left with some indent.
When you hover on main menu or sub menu, the font should change it's color to black and weight should be bold. The color is getting changed but not the weight. The code responsible for this:
nav li:hover > a {color:#000000; background:#F6C739;font-weight:bold; }
When you hover on a sub menu item, the top menu item's background should be orange but the background color is getting removed as soon as you hover on a sub menu item. Again I think this is caused by:
.nav li:hover > a {color:#000000; background:#F6C739;font-weight:bold; }
2 and 3 are not important on but 1 has to be solved. Hope some one find out the bug.
Prashant