<nav>
<ul>
<li><a href="#">Home</a></li>
<li class="submenu"><a href="#">Portfolio</a>
<ul >
<li><a href="#">Animation</a></li>
<li><a href="#">Game Design</a></li>
<li><a href="#">Web Design</a></li>
</ul>
</li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
/*Styling the main menu*/
nav ul li {
float: left;
list-style: none;
}
nav ul li a {
color: white;
background: cornflowerblue;
padding: 10px;
text-decoration: none;
display:inline-block;
width: 100px;
}
nav ul li a:hover {
background: cornflowerblue;
}
/* Styling the sub menu */
.submenu {
position: relative;
}
.submenu ul {
position: absolute;
padding:0;
margin:0;
display: none;
}
.submenu li{
display: block;
background: lightsteelblue;
color: white;
float: none;
width: 100%;
}
/* Styling drop down links */
.submenu li a {
background: transparent;
padding:10px;
display: block;
}
.submenu li a:hover {
background: gray;
}
/* Showing Submenu on hover*/
.submenu:hover ul {
display: block;
}