Making Vertical Drop Down Menu Using Html and Css

Web
Fadıl
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

<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

.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.