dropdown menu

menubar

by Md. Mostafa Kamal

HTML

<nav class="navclass">
<ul>
<li>car
<ul class="submenu">
<li>honda</li>
<li>toyota</li>
<li>bmw</li>
</ul>
<span class="arrow">&#9660;</span></li>
<li>computer
<ul class="submenu">
<li>mac</li>
<li>lenovo</li>
<li>acer</li>
</ul>
<span class="arrow">&#9660;</span></li>
<li>drink</li>


</ul>
</nav>

CSS

.navclass> ul{
  background-color:#5E5050;
  font-size:20px;
  font-family:sans-serif;
}
.navclass>ul>li{
  list-style-type:none;
  display:inline-block;
  padding:5px 25px;
}
.navclass>ul>li:hover{
  background-color:red;
}
ul.submenu{
  background-color:red;
  position:absolute;
  width:125px;
  opacity:0;
  margin-left=-35px;
  list-style-type:none;
}
.navclass li:hover .submenu{
  opacity:1;
}
ul.submenu li:hover{
  background-color:blue;
  color:white;
}