Menu Problem in IE for CSS stylesheet

[Paulson]

HI all

I got a problem with my menu display.I am making a list as shown below in one of my aspx pages. And added a stylesheet in CSS for it.
This is not working in IE but not in Mozilla Firefox it is working.
Can anyone please help me with this?

Just after the page html I pasted my CSS stylesheet code also.

_______________ _______________ _______________ _______________ ______

Page
_____

<%@ Page Language="VB" MasterPageFile="~/SalesMasterPage.master" AutoEventWireup="false" CodeFile="BasestyleTest.aspx.vb" Inherits="BasestyleTest" title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<form id="test" onclick="hoverer();" action="BasestyleTest.aspx" >
<script type="text/JavaScript">
function hoverer(ulname) {
if (document.all && document.getElementById(ulname).currentStyle ) {
var navroot = document.getElementById(ulname);
var lis=navroot.getElementsByTagName("li");
for (i=0; i<lis.length; i++) {
var oldClassName = this.className;
lis[i].onmouseover=function() {this.className = ulname + "ie";}
lis[i].onmouseout=function() {this.className = oldClassName;}
}
}
}
</script>
 
<ul>
  <li>Reference File maintainence
    <ul>
      <li><a href="">Standard Maintainence</a></li>
      <li><a href="">Temper Maintainence</a></li>
      <li><a href="">Test Certificate Maintainenece</a></li>
      <li><a href="">Export/Domestic Code Maintainence</a></li>
    </ul>
  </li>
  <li>Order/Sample
    <ul>
      <li><a href="">Sales Contract</a></li>
      <li><a href="">Mill Order/Enquiry Maintainence</a></li>
      <li><a href="">Mill order No. By Cust Order No.</a></li>
    </ul>
  </li>
 
  <li>Invoice Shipping
    <ul>
      <li><a href="">Invoice Document Maintainence</a>
                <ul >
                    <li >
                        <a href="testChild.aspx">Invoice Header Maintainenece 1</a>
                        <a href="testChild.aspx">Invoice Header Maintainenece 2</a>
                        <a href="testChild.aspx">Invoice Header Maintainenece 3</a>
                    </li>
                </ul> 
       </li>
      <li><a href="">Shipping Maintainence Document</a></li>
      <li><a href="">Provisional Invoice Document Maintainence</a></li>
    </ul>
  </li>
</ul>
</form>   
</asp:Content>

_______________ _______________ _______________ _______________ ______

CSS Style Sheet

BODY    
{
    background: #FFFFD8;
}
A:link
{
    color: #400080;
    background: #FFFFD8
}
/* Unorderd list and list styles specially for menu dropdowns 
 
ul {
    margin: 0;
    padding: 0;
    list-style: none;
    width: 150px;
    }
 
ul li {
    position: relative;
    }
li ul {
    position: absolute;
    left: 149px;
    top: 0;
    display: none;
    }
ul li a {
    display: block;
    text-decoration: none;
    color: #777;
    background: #fff;
    padding: 5px;
    border: 1px solid #ccc;
    border-bottom: 0;
    }
ul {
    margin: 0;
    padding: 0;
    list-style: none;
    width: 150px;
    border-bottom: 1px solid #ccc;
    }
li:hover ul
    { 
      display: block; 
    }
/*---------- TILL NOW TRIAL GOOD ONE BEGIN ----------*/
/* This is for aranging horizontally */
 
ul {
  padding: 0;
  margin: 0;
  list-style: none;
  }
 
  li {
  float: left;
  position: relative;
  width: 16em;
  font-size:small;  
  }
 
  li ul {
  display: none;
  position: relative ;
  top: 1em;
  left: 0;
  }
 
  ul li {
    position: relative;
    }
 
 
li ul li ul {
    position: absolute;
    left: 15em;
    top: 0;
    display: none;
    visibility :hidden; 
    }
 
/*li ul li ul a:hover{display: block;}*/
 
 
li > ul {
    top: auto;
    left: auto;
 
    }
/*li:hover ul
{ 
    display: block; 
}*/
li:hover ul, li.over ul{ display: block; }
 
li ul li:hover ul
{ 
    visibility:visible ; 
}
li:hover li 
{
    background-color:#DDFFCC;
}
 
a
{
    text-decoration:none;
    color:Fuchsia ;
}
a:hover { color: Blue;}
/*Testing set*/
li ul li ul {
    position: absolute;
    left: 15em;
    top: 0;
    display: none;
    }
 
/*---------- TILL NOW TRIAL GOOD ONE BEGIN ----------*/
/*----------*/
 
 
/* TEST FOR IE */
/*
ul#nav
{
margin: 0;
padding: 0;
list-style: none;
position: relative;
height: 100px;
}
 
ul#nav li { float: left; display: block; padding-right: 10px;}
 
ul li a {
 
text-decoration: none;
color: #777;
background: #fff;
padding: 5px 15px;
 
background-color: #fff;
width: 100px;
}
 
ul li a:hover {color: #CC3366; background: #eeeeee;}
 
li ul { display: none; list-style: none;}
 
li:hover ul#abt, li.over ul#abt
{ display: block; position: absolute; top: 23px; left: 69px; margin: 0px; padding: 0px;}
 
li:hover ul#ser, li.over ul#ser
{ display: block; position: absolute; top: 23px; left: 130px; margin: 0px; padding: 0px;}

If someone gets any idea pls help me.

Paulson

[Paulson]

Hi all,

I did not try but I think gving the js file like this will help in your part page

<script type="text/javascript" language="JavaScript1.2">
    <!--#include virtual="iehover.js"-->
    </script>

Paulson

[Death Slaught]

Could you please be ever so slightly more specific in what your problem is? Is your CSS stylesheet not working, only certain rules, or properties are working, or is it something else?

Thanks, Death