CODEWITHSUNDEEP
htmlcss
user3120029
user3120029

Reputation: 3

HTML / CSS Submenu

I have been trying quite a few guides on getting sub-menus to work. Some which include JS. Now I'm trying a just css approach but I'm kinda stuck on getting the submenu to work for me.

My code is on fiddle here: http://jsfiddle.net/PLb5K/

To do a basic test I have done

#nav ul li ul {
 display: none; }

#nav ul li:hover ul {
 display: block;
 position: absolute; }

UPDATE

    #nav ul:hover .sub {
     display: block;
     position:absolute;
     }

fixes the "not working on hover" issue but any list item will show the sub menu. Please could anyone help on how to make it so only the single parent will show the submenu.

Upvotes: 0

Views: 125

Answers (1)

Facundo Colombier
Facundo Colombier

Reputation: 3661

here is a basic html/css example for you:

the fiddle

css

ul  {
    margin: 0;
    padding: 0px 100px 0px 0px;
    list-style: none;
    line-height: normal;
    text-align: center;
}

ul li {
    background-color:grey;
    display: inline-block;
    *display: inline; 
    padding:4px 8px;
    margin:0;
    zoom: 1; 

}
ul li a{
    color: white;
    text-decoration:none;
}
ul li ul.sub{
    display:none;
    position:absolute;
    margin-top:4px;
    margin-left:-8px;
}
ul li:hover ul.sub{
    display:block;
}

Upvotes: 1

Related Questions