How to show sub menu in menu bar | Sololearn: Learn to code for FREE!
New course! Every coder should learn Generative AI!
Try a free lesson
+ 1

How to show sub menu in menu bar

How to show sub menu or drop down menu in css menu bar.

10th Sep 2019, 1:46 PM
2 Answers
+ 15
<style> *{margin:0; padding:0;} a{text-decoration:none;} #menu { width:100%; height:50px; float:left; } #main-menu {list-style:none;} #main-menu li{ background:#ccc; list-style:none; float:left; border:1px solid transparent; transition:.3s; position:relative; } #main-menu li a{ padding:10px 30px; float:left; } #main-menu > li:hover{ border:1px solid blue; } #main-menu > li:hover ul{ visibility:visible; opacity:1; } #main-menu li ul{ position:absolute; float:left; left:-1px; top:39px; border:1px solid blue; border-top:none; width:100%; visibility:hidden; opacity:0; transition:all .3s; } #main-menu li ul li{float:none;} #main-menu li ul li:hover {background:#ccc;} #main-menu li ul li a{ float:none; display:block; text-align:center; } </style> <body> <div> <nav> <ul id="main-menu" > <li><a href="#" >one</a></li> <li><a href="#" >two</a></li> <li><a href="#" >three</a> <ul> <li><a href="#" >apple</a></li> <li><a href="#" >orange</a></li> <li><a href="#" >melon</a></li> </ul> </li> </ul> </nav> </div>
10th Sep 2019, 2:16 PM
Sheida Hedayati
Sheida Hedayati - avatar
+ 2
Thanks madam
10th Sep 2019, 2:23 PM