Making Vertical Drop Down Menu Using Html and Css

Posted on 20 November 201913 November 2019 by fadıl

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>

<html>

<head>

<title>Dikey Açılır Menü Yapımı</title>

</head>

<body>

<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;
}

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

Leave a Reply Cancel reply