I have used a menu control and styled it using the CSS friendly control adapters along with a css file. When i view in IE7 or FF3 the menu works fine but when viewed in IE6 i do not get the second tier list items drop down.
Here is the css file used to style,
.myMenuCSS .AspNet-Menu-Horizontal
{
position: relative;
z-index: 300;
}
.myMenuCSS ul.AspNet-Menu /*Tier 1*/
{
margin: 0;
padding-left: 270px;
/*padding-top: 20px;*/
list-style: none;
}
.myMenuCSS ul.AspNet-Menu ul
{
/*left: 0%;
z-index: 400;
list-style: none;*/
width: 100px;
background: #181A1C;
left: 5px;
top: 4em;
}
.myMenuCSS ul.AspNet-Menu ul li /*Tier 2 List Items*/
{
width: 8.9em;
float: left;
clear: left;
height: 100%;
display: inline;
}
.myMenuCSS ul.AspNet-Menu ul ul /*Tier 3*/
{
top: 10em;
left: 0.6em;
}
.myMenuCSS li /*All list items*/
{
font-size: 12px;
display: inline;
}
.myMenuCSS li:hover, /*list items hovered over*/
.myMenuCSS li.AspNet-Menu-Hover
{
width: 100px;
background: #DC8700;
display: inline;
}
.myMenuCSS a, .myMenuCSS span
{
display: block;
float: left;
height: 20px;
margin: 0;
padding: 18px 30px 18px 40px;
background: url(images/img08.jpg) no-repeat left 30%;
text-decoration: none;
text-transform: capitalize;
font-family: Georgia, "Times New Roman" , Times, serif;
font-size: 10px;
color: #FFFFFF;
}
.myMenuCSS li.AspNet-Menu-Leaf a, /*Leaves*/
.myMenuCSS li.AspNet-Menu-Leaf span
{
}
I have followed instructions on the adapters and put the following code in my master page head div,
<!--[if lt IE 7]>
<link runat="server" rel="stylesheet"
href="~/CSS/BrowserSpecific/IEMenu6.css" type="text/css">
<link href="myMenuCSSIE6.css" rel="stylesheet" type="text/css" />
<![endif]-->
And the myMenuCSSIE6.css is as follows
.myMenuCSS ul.AspNet-Menu li /*Tier 1*/
{
width: 1em;
white-space: nowrap;
}
.myMenuCSS ul.AspNet-Menu ul li /*Tier 2 list items*/
{
white-space: normal;
}
Do i need to add some more code to this IE6 file to make the menu work?
Not sure how i solve this, any help is much appreciated.