Skip to content Skip to sidebar Skip to footer
Home / Css / Html / Menu / Submenu

Sub-Menu Not Working In IE & Chrome.. Working In FF, Opera

Post a Comment
Below is the code that I am writing in HTML and I'm getting what I want perfectly in FF, Opera. My friend is able to run in IE too but I'm not... Also I am not able to see output

Solution 1:

You have a lot of duplicate styles in your css. Try to eliminate those. Especially the uls have a lot of rules which override each other. Try to use classes for the different levels of your uls to make to rules more specific.

EDIT:

all the css code you need: (test it)

#nav, #nav ul {
    line-height: 1.5em;
    list-style:none;    /* <- shorthand declaration is enough */
    margin: 0;
    padding: 0;
    position: relative;
}

#nav a:link, #nav a:active, #nav a:visited {
    background-color: #333333;
    border: 1px solid #333333;
    color: #FFFFFF;
    display: block;
    padding: 0 5px;
    text-decoration: none;
}

#nav a:hover {
    background-color: #FFFFFF;
    color: #333333;
}
#nav li {
    position: relative;
    width: 80px;     /* <- This defines the width, no need to declare elsewhere */
}

#nav ul {
    display: none;
    left: 100%;      /* <- % makes you indepentent of declared with in li*/
    position: absolute;
    top:0;
}

#nav li:hover > ul{
     display:block;  /* <- does all the hovermagic for you, no matter how many ul-levels you have */
}

for several reasons, this code wont work in IE 6 (if you need to support it, you need some really nasty workarounds)


Solution 2:

Part of the issue is that you have not declared a doctype in your HTML. No declared doctype will put IE into quirksmode and then it behaves differently than what you're expecting.

You're going to want to place <!DOCTYPE html> at the top of your document. Quirksmode Explanation

Additionally I think there are a many robust solutions available that will work a little better than yours. As previously mentioned you have many duplicate styles declared, which is likely also causing you issues.

A quick google search game up with the following solution which works really well. CSS3 Dropdown Menu

I did a quick modification of the code there and applied it to yours. Not sure if this will do exactly what you're looking for, but it's a start.

<style>

#nav {
 margin: 0;
 padding: 0;
 list-style: none;
 line-height: 1.5em;
}

#nav li {
  position: relative;
  width: 100px;
}

/* main level link */
#nav a:link, #nav a:active, #nav a:visited  {
  background-color: #333333;
  border: 1px solid #333333;
  color: #FFFFFF;
  display: block;
  padding: 0 5px;
  text-decoration: none;
  visibility: visible;
}

#nav a:hover {
  background: #ffffff;
  color: #333333;
}

/* dropdown */
#nav li:hover > ul {
 display: block;
} 

/* level 2 list */
#nav ul {
  display: none;
  left: 100px;
  position: absolute;
  width: 192px;
  top: 0;
}

#nav ul li {
 float: none;
 margin: 0;
 padding: 0;
}

/* clearfix */
#nav:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

#nav {
  display: inline-block;
} 

html[xmlns] #nav {
 display: block;
}

* html #nav {
  height: 1%;
}
</style>

Hope that helps!


Post a Comment for "Sub-Menu Not Working In IE & Chrome.. Working In FF, Opera"