当前位置: 动力学知识库 > 问答 > 编程问答 >

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

问题描述:

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 Chrome. Any reason??

<html>

<head>

<style>

#nav, #nav ul {

line-height: 1.5em;

list-style-position: outside;

list-style-type: none;

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;

visibility: visible;

}

#nav a:hover {

background-color: #FFFFFF;

color: #333333;

}

#nav li {

position: relative;

width: 100px;

}

#nav ul {

display: none;

left: 100px;

position: absolute;

width: 192px;

top:0;

}

#nav li ul a {

float: left;

width: 192px;

}

#nav ul ul {

top:0;

}

#nav li ul ul {

left: 192px;

top:25px;

margin: 0 0 0 13px;

}

#nav li ul ul ul {

left: 192px;

top:0px;

margin: 0 0 0 13px;

}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{

display: none;

}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul {

display: block;

}

</style>

</head>

<body>

<ul id="nav">

<li><a href="#">cat1</a><ul class="jaccordion">

<li><a href="#">cat1.1</a><ul class="jaccordion"></ul></li>

<li><a href="#">cat1.2</a><ul class="jaccordion">

<li><a href="#">cat1.2.1</a><ul class="jaccordion">

<li><a href="#">cat1.2.1.1</a><ul class="jaccordion"></ul></li></ul></li></ul></li>

<li><a href="#">cat1.3</a><ul class="jaccordion"></ul></li>

</ul></li>

<li><a href="#">cat2</a><ul class="jaccordion">

<li><a href="#">cat2.1</a><ul class="jaccordion"></ul></li></ul></li>

</ul>

</body>

</html>

Thanks in advance...

网友答案:

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)

网友答案:

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!

分享给朋友:
您可能感兴趣的文章:
随机阅读: