Hello. I would like to know how to create a sub menu. After having created the horizontal navigation bar, I decided that I would like to add more links usng the existing navigation bar. In the navigation bar, I have the following...
"Home" "Digital" "Drawing" "Painting" "About"
When the mouse rolls over the "Painting" link, I would like to have listed vertically underneath it "Watercolor" and "Oil" as two additional links. I would appreciate your assistance. Thank you.
My html and css code is as follows;
html:
<body>
<div class="nav">
<ul>
<li class="active" id="active"><a href="index.html" target="_self">HOME</a></li>
<li> <a href="digital.html" target="_self">DIGITAL</a></li>
<li><a href="drawing.html" target="_self">DRAWING</a></li>
<li><a href="painting.html" target="_self">PAINTING</a></li>
<li><a href="about.html" target="_self">ABOUT</a></li>
</ul>
</div>
</body>
css:
.nav {
width: 960px;
height: 43px;
margin-top: 46px;
font-size: 18.5px;
z-index: 5;
font-family: Arial, Helvetica, sans-serif;
background-color: #000;
}
ul{
list-style-type: none;
text-align: right;
padding-top: 10px;
padding-bottom: 6px;
padding-right: 0px;
}
li {
display: inline;
}
a:link {
color: #FFF;
background-color: #000;
text-align: center;
padding-top: 8px;
padding-right: 9.7px;
padding-bottom: 8px;
padding-left: 9.7px;
margin-left: -2px;
text-decoration: none;
outline: 0;
}
a:visited {
color: #FFF;
background-color: #000;
text-decoration: none
}
a:hover {
color: #000;
background-color: #FFF;
text-decoration: none;
}
.active a {
display:inline;
color: #000;
background-color: #FFF;
text-decoration: none;
}