Home/ Questions/Q 7410865
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-29T06:17:55+00:00

Below is the code that I am writing in HTML and I’m getting what

  • 0

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…

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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)

    • 0