Making Vertical Drop Down Menu Using Html and Css
When designing a site, sometimes there may be many nested categories, in which case using a drop-down menu makes it easier for users to find what they are looking for. In this lesson, we will make a vertical drop-down menu using only Html and CSS.
Although you have enough Html and CSS information, drop-down menus are not used too much to edit one ul, li and tags can be a waste of time to edit. Therefore, I wanted to make a simple drop-down menu without confusion in my article. You can easily get the menu you want by making small changes to the codes.
index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | <html> <head> <title>Dikey Açılır Menü Yapımı</title> <link rel="stylesheet" href="stil.css"> </head> <body> <div class="acilirmenu"> <ul> <li><a href="index.html">Anasayfa</a></li> <li><a href="#">Elektronik</a> <ul> <li><a href="#">Televizyon</a></li> <li><a href="#">Beyaz Eşya</a></li> <li><a href="#">Klima</a></li> </ul> </li> <li><a href="#">Bilgisayar</a> <ul> <li><a href="#">Masaüstü</a></li> <li><a href="#">Notebook</a></li> <li><a href="#">Donanım Birimleri</a></li> <li><a href="#">Network Ürünleri</a></li> </ul> </li> <li><a href="#">Telefon</a></li> <li><a href="#">Kamera</a></li> <li><a href="#">İletişim</a></li> <li><a href="#">Hakkımızda</a></li> </ul> </div> </body> </html> |
stil.css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | .acilirmenu{ width:180px; height:auto; } .acilirmenu ul{ width:180px; margin:0; padding:0; list-style-type:none; } .acilirmenu li{ position: relative; } .acilirmenu li ul{ position:absolute; list-style-type:none; left:179px; width:180px; display:none; top:0; } .acilirmenu li a{ height:30px; display: block; text-decoration: none; background-color: #3EA3AD; color:#FFF; font:500 15px Verdana; padding:5px; border:1px solid #FFF; border-bottom:0; text-align: center; line-height: 30px; } .acilirmenu li a:hover{ background-color:#52BEAA; color:#FF0; } .acilirmenu li:hover ul{ display:block; } |
The most common error when making a pop-up menu is where the tag is turned off in the pop-up menu. Also, when changing the width of the menu, the starting point of the pop-up menu must be changed.
I hope it has been a useful article.