Sub menus are going towards left instead of going vertically

[wasim687]

ul {
list-style-type: none;
margin: 0;
padding:10px 2px 10px 2px;
overflow: hidden;
background-color:rgba(0,0,0,0.5);
position: fixed; /* To keep navigation menu fixed*/
top: 0px;
left: 0px;
width: 100%;
height: 77px;
z-index:1000;
}

li a {
display:block;
color: white;
padding: 14px 16px;
text-decoration: none;
z-index: 1000;
text-align:center;
}

li {
float: left;
}

ul #submenu {
display: none;
}

li a:hover {
background-color: #111;

}

[Paulie_D]

You aren’t being specific enough in your selectors

li {
float: left;
}

This tells ALL list items to float left, wherever they are. You need to override that…perhaps with something like…

ul #submenu > li {
float:none;
}

[wasim687]

Thanks,I really appreciate that. One more thing,what should I do now so that sub menus should come when I hover on unordered list?

[Paulie_D]

More research.

There are thousands of tutorials on building CSS dropdown menus….just google it.

[Author]

Posts