CODEWITHSUNDEEP
htmlcssdrop-down-menuvisibilitynav
user3956566
user3956566

Reputation:

Making a dropdown menu visible only on hover

I have been searching the internet. This question Hovering <a> in CSS without href on Stack Overflow, doesn't address my issue in a way I can understand.

I am trying to make a "primary" menu, with no links.

From each item in the menu, I'd like to create a drop down menu when hovering or clicking upon the item.

I would like to do this with CSS only.

I am having confusion. I have tried various permutations with z-index, positioning and visibility. However, I am finding it hard to achieve the result I need. I have also tried having links in the outside list items.

This is my code:

HTML:

<ul>
        <li>Name 1
          <ul>
            <li><a href="a.html" title="a">anteater</a></li>
            <li><a href="b.html" title="b">bee</a></li>
            <li><a href="c.html" title="c">cat</a></li>
            <li><a href="d.html" title="d">dog</a></li>
          </ul>
        </li>
        <li>Name 2
          <ul>
            <li><a href="e.html" title="e">egg</a></li>
            <li><a href="f.html" title="f">fern</a></li>
            <li><a href="g.html" title="g">goose</a></li>
            <li><a href="h.html" title="h">house</a></li>
          </ul>
        </li>
</ul>

CSS:

ul   {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
li   {
    float: left;
    padding: 30px 15px 20px 15px;
    border-right: dotted #FFFFFF 1px;
    color: #FFFFFF;
    font-size: 11px;
    position: relative;
    z-index: 3;
}
li.end  {
    float: right;
}
a  {
    display: block;
    text-decoration: none;
}
a:link {
    color: #FFFFFF;
}
a:visited {
    color: #FFFFFF;
}
a:hover  {
    color: #0099FF;
}
a:active  {
    color: #FFFFFF;
    overflow: visible;
}
ul li:active ul, ul ul {
    visibility:visible;
}
ul li:active ul, ul ul li {
    visibility:visible;
}
ul li:hover ul, ul ul {
    visibility: visible;
}
ul li:hover ul, ul ul li {
    visibility:visible;
}
ul ul  {
    list-style-type: none;
    margin: 0;
    position: absolute;
    visibility: hidden;
    z-index:-1;
}
ul ul li  {
    float: left;
    padding: 5px 10px;
    border-right: dotted #0000FF 1px;
    background-color: #000000;
    color: #FFFFFF;
    font-size: 11px;
    position: relative;
    visibility:hidden;
}

ul ul li a  {
    display: block;
    text-decoration: none;
}
ul ul li a:link  {
    color: #0000FF;
}
ul ul li a:visited  {
    color: #0000FF;
}
ul ul li a:hover  {
    color: #FFFFFF;
    visibility:visible;
}
ul ul li a:active {
    color: #FFFFFF;
    overflow: visible;
    visibility:visible;
}

Upvotes: 2

Views: 6004

Answers (1)

Bugaloo
Bugaloo

Reputation: 1691

See this example http://jsfiddle.net/La2L8/

I think you have excessive CSS code

Upvotes: 6

Related Questions