Help with CSS menu

[kramsull]

Hi everyone,

I'm a newbie with CSS and I'm having a problem with a CSS menu that was created by a coworker who is no longer with us. The stylesheet works in Firefox but breaks in IE. It's a CSS Menu. The problem I'm having is that I cant select the items undeneath the second menu level or more. Please look at the this zip link (http://www.designerstalk.com/forums/attachments/help-me/7045d1236276049-help-css-menu-csserror.zip) to see the problem.

I'm at a lost right now and would appreciate any help.



Thanks,
kramsull

[Wickham]

This works in IE7 and Firefox:-


body { }

/*
.AspNet-Menu-Horizontal ul.AspNet-Menu ul ul
{
width: 10em;
top: -0.5em;
left: 6em;
}
*/

div.AspNet-Menu-Horizontal {margin: 0px 0px 0px 0px; height: 23px;

width: 850px;z-index: 300; background-color: blue;/*#6E6A5A;*/

padding: 0; }
.AspNet-Menu-Horizontal ul.AspNet-Menu li { text-align:center;}
.AspNet-Menu-Horizontal ul.AspNet-Menu li li { text-align:left; }
.AspNet-Menu-Horizontal ul.AspNet-Menu li ul li ul { position:relative;

left: 100%; top: -23px; /*height: 0px;*/ }
.AspNet-Menu-Horizontal ul.AspNet-Menu li {float: left; }
.AspNet-Menu-Horizontal ul.AspNet-Menu li li { float: none; }
div.AspNet-Menu-Horizontal ul.AspNet-Menu li img { display:none; }
ul.AspNet-Menu li { background: green;/*#6E6A5A;*/ margin: 0px 0px

0px 0px; }
ul.AspNet-Menu li a { min-width: 75px; font-size: 12px; margin: 0px 0px

0px 0px; padding: 3px 5px 3px 5px; color:White; border-right:1px solid

#E4DCB2; }
ul.AspNet-Menu li li a { border: 0px; color:White; }
ul.AspNet-Menu li.AspNet-Menu-WithChildren a { padding-right: 20px; }
ul.AspNet-Menu { position: relative; }

ul.AspNet-Menu,
ul.AspNet-Menu ul { margin: 0px 0px 0px 0px; padding: 0; display:

block; }
ul.AspNet-Menu ul { position: absolute; display: none; width: 100%; left:

0; top: 100%; }

ul.AspNet-Menu li { position: relative; list-style: none; }
ul.AspNet-Menu li a,
ul.AspNet-Menu li span { display: block; text-decoration: none; }

/* Add more rules here if your menus have more than three (11) tiers */
ul.AspNet-Menu li:hover ul ul,
ul.AspNet-Menu li:hover ul ul ul,
ul.AspNet-Menu li:hover ul ul ul ul,
ul.AspNet-Menu li:hover ul ul ul ul ul,
ul.AspNet-Menu li:hover ul ul ul ul ul ul,
ul.AspNet-Menu li:hover ul ul ul ul ul ul ul,
ul.AspNet-Menu li:hover ul ul ul ul ul ul ul ul,
ul.AspNet-Menu li:hover ul ul ul ul ul ul ul ul ul,
ul.AspNet-Menu li:hover ul ul ul ul ul ul ul ul ul ul,
ul.AspNet-Menu li:hover ul ul ul ul ul ul ul ul ul ul ul,
ul.AspNet-Menu li:hover ul ul ul ul ul ul ul ul ul ul ul ul,
ul.AspNet-Menu li.AspNet-Menu-Hover ul ul,
ul.AspNet-Menu li.AspNet-Menu-Hover ul ul ul,
ul.AspNet-Menu li.AspNet-Menu-Hover ul ul ul ul,
ul.AspNet-Menu li.AspNet-Menu-Hover ul ul ul ul ul,
ul.AspNet-Menu li.AspNet-Menu-Hover ul ul ul ul ul ul,
ul.AspNet-Menu li.AspNet-Menu-Hover ul ul ul ul ul ul ul,
ul.AspNet-Menu li.AspNet-Menu-Hover ul ul ul ul ul ul ul ul,
ul.AspNet-Menu li.AspNet-Menu-Hover ul ul ul ul ul ul ul ul ul,
ul.AspNet-Menu li.AspNet-Menu-Hover ul ul ul ul ul ul ul ul ul ul,
ul.AspNet-Menu li.AspNet-Menu-Hover ul ul ul ul ul ul ul ul ul ul ul
{ display: none; }

ul.AspNet-Menu li:hover ul,
ul.AspNet-Menu li li:hover ul,
ul.AspNet-Menu li li li:hover ul,
ul.AspNet-Menu li li li li:hover ul,
ul.AspNet-Menu li li li li li:hover ul,
ul.AspNet-Menu li li li li li li:hover ul,
ul.AspNet-Menu li li li li li li li:hover ul,
ul.AspNet-Menu li li li li li li li li:hover ul,
ul.AspNet-Menu li li li li li li li li li:hover ul,
ul.AspNet-Menu li li li li li li li li li li:hover ul,
ul.AspNet-Menu li li li li li li li li li li li:hover ul,
ul.AspNet-Menu li.AspNet-Menu-Hover ul,
ul.AspNet-Menu li li.AspNet-Menu-Hover ul,
ul.AspNet-Menu li li li.AspNet-Menu-Hover ul,
ul.AspNet-Menu li li li li.AspNet-Menu-Hover ul,
ul.AspNet-Menu li li li li li.AspNet-Menu-Hover ul,
ul.AspNet-Menu li li li li li li.AspNet-Menu-Hover ul,
ul.AspNet-Menu li li li li li li li.AspNet-Menu-Hover ul,
ul.AspNet-Menu li li li li li li li li.AspNet-Menu-Hover ul,
ul.AspNet-Menu li li li li li li li li li.AspNet-Menu-Hover ul,
ul.AspNet-Menu li li li li li li li li li li.AspNet-Menu-Hover ul,
ul.AspNet-Menu li li li li li li li li li li li.AspNet-Menu-Hover ul
{ display: block; }

li.AspNet-Menu-Leaf ,
li.AspNet-Menu-SelectedLeaf { background-image: none; }
li.AspNet-Menu-WithChildren > a
{color:White; background-color: olive;/*#6E6A5A;*/ background-image:

url('navdown_white.gif') !important;background-repeat:no-repeat;
background-position: right ; height: 17px; padding: 0; margin: 0; }

li li.AspNet-Menu-WithChildren > a
{background-image: url('nav_white.gif') !important; }


li.AspNet-Menu-SelectedWithChildren > a,
li.AspNet-Menu-WithChildren > a:hover
{color:White; background-color: purple;/*#404040;*/ background-image:

url('navdown_white.gif') !important;background-repeat:no-repeat;

background-position:right; }

li li.AspNet-Menu-SelectedWithChildren > a,
li li.AspNet-Menu-WithChildren > a:hover
{ color:White; background-image: url('nav_white.gif') !important; }


li.AspNet-Menu-ChildSelected > a
{color:White; background-color: violet;/*#404040;*/ background-image:

url('arrowRight.gif') !important;background-repeat:no-repeat;

background-position:right; }

a.AspNet-Menu-SelectedLeaf { color:White; background-color:

brown;/*#404040; */}
a.AspNet-Menu-Leaf { color:White; background-color: red;/*#6E6A5A;*/ }

ul.AspNet-Menu li:hover,
ul.AspNet-Menu li.AspNet-Menu-Hover { color:White;

background:#404040; }


li { height: 23px; }
li { line-height: 1.3; }



Unfortunately the height: 23px; that I added means that text that is on two lines cuts off the bottom line, so you will have to make links have just one word or increase the width of the boxes.

I added different background-colors to see which boxes had problems so you can edit the colors back to the original ones.

At present the drop down menu doesn't work at all in IE6 and you need a behavior file csshover.htc version 1.42.060206. from here:-
http://www.xs4all.nl/~peterned/csshover.html near the bottom of the page. Put this conditional comment in the html file head section just before the </head> closing tag (lt ie 7 means less than IE7):-

<!--[if lt ie 7]>
<style type="text/css" media="screen">
body { behavior:url(csshover.htc); }
#id { } /*special styles for IE6 here*/
</style>
<![endif]-->

It will then show the drop down boxes but incorrectly.

The > in styles like
li.AspNet-Menu-ChildSelected > a { }
means that IE7 and css compliant browsers like Firefox will obey this rule but not IE6 so you need to make special styles to suit IE6 as the styles with > don't work in IE6 and put them in the conditional comment above.