Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Oct 2004
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS Rollover Dropdown Navigation Menu -- IE Problem

    I found a page with a CSS drop down menu, and built one for a site of my own using thier coding techniques. The menu that I have works fine in Mozilla/Firefox 1.0 and in Netscape 7.1 but not in any version of IE. The tutorial site had added a small piece of javascript because IE didnt regonize the 'hover' on any element except anchors. My page isnt dropping the menus that appear under the headings. Oh yeah, the menu is based on tweaking the layout of nested Unordered Lists <UL>

    Here is my page: My CSS Drop Menu

    Here is the example: CSS Drop Example

    Here is all my CSS:
    Code:
    #nav {
    	float: left;
    	width: inherit;
    	padding: 0;
    	margin: 0;
    	background-color: #C8B77F;
    	font-family:Verdana, Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	font-weight: bold;
    	color: #3E3317;
    	border-bottom: 1px solid;
    	border-bottom-color: #61522B
    }
    
    /* NAVIGATION DROP-MENU */
    
    #nav ul { /* all lists */
    	color:#3D3415;
    	background-color:#C8B880;
    }
    
    #nav li { /* all list items */
    	padding: 3px 20px 3px 20px;
    	float: left;
    	position: relative;
    	background-color:#C8B880;
    }
    
    #nav li ul { /* second-level lists */
    	width: 12em;
    	display: none;
    	margin: 4px 0px 0px 0px;
    	padding:0;
    	position: absolute;
    	top: 1em;
    	left: 0;
    	background-color: #EEE1B5;
    	border: 1px solid #61522B;
    	border-top: none;
    }
    
    #nav li ul li {
    	clear: left;
    	padding: 2px 0px 3px 4px;
    	background-color: #EEE1B5;
    }
    
    #nav li>ul {
    	top: auto;
    	left: auto;
    }
    
    #nav li:hover ul, li.over ul { 
    	display: block;
    }

  • #2
    Regular Coder
    Join Date
    Apr 2004
    Location
    Birmingham, MI
    Posts
    131
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The only element IE supports :hover on is a

  • #3
    Senior Coder
    Join Date
    Jun 2002
    Location
    Wichita
    Posts
    3,880
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I did some checking and the javascript is working and the class is being added and removed from the LI element, IE is just ignoring the class for some reason.

    I also noted that in Firefox if you move too slowly between the top level menu and the menu items underneath that the menu will disappear on you so there's an additional problem you may not be aware of yet.
    Check out the Forum Search. It's the short path to getting great results from this forum.

  • #4
    New to the CF scene
    Join Date
    Oct 2004
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    FIXED!! (sort of)

    Well...

    It is sort of fixed. It seems that IE was confused/hated the #nav IDs before the ul & li definition in the CSS. once removed it acted properly but the positioning is a little whack. Im trying to find a hack so that IE will put the drop downs in the right spots like Firefox/Mozilla does. Thanks to those who commented


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •