Tag:
Dropdown Menu using HTML and CSS
body{
margin: 5px;
padding: 10px;
font-family: 'Open Sans', sans-serif;
font-size: 22px;
line-height: 32px;
color: #fff;
}
nav{
background-color: #008ea1;
}
nav ul{
padding: 0;
margin: 0;
list-style: none;
position: relative;
}
nav ul li{
display: inline-block;
background-color: #008ea1;
}
nav a{
display: block;
padding: 0 10px;
color: #fff;
line-height: 60px;
font-size: 20px;
text-decoration: none;
}
nav ul ul{
display: none;
position: absolute;
top: 60px;
}
nav a:hover{
background-color: #f8e80c;
}
nav ul li:hover > ul{
display: inherit;
}
nav ul ul li {
width: 170px;
float: none;
display: list-item;
position: relative;
}
nav ul ul ul li{
position: relative;
top: -60px;
left: 170px;
}
li > a::after{
content: ' ^';
}
li > a:only-child::after{
content: '';
}