Implementation of Dropdown Menu with HTML+CSS

Time:2019-8-10

1. Examples of drop-down lists

The code is as follows:

<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <style>
    *{
    margin:0;
    padding:0;
    text-decoration:none;
    list-style:none;
}
body{
    text-align:center;
}
.header{
    display:inline-block;
    position:relative;
    background-color:#4CAF50;
}
.header:hover .downbtn{
    display:block;
    background-color: #f1f1f1;
}
.header:hover{
    background-color: #3e8e41;
}
.header span{
    padding:15px;
    line-height:61px;
    cursor:pointer;
    color: white;
}
.header .downbtn{
    display:none;
    position:absolute;
    background-color:#f9f9f9;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    min-width: 160px;
}
.header .downbtn li{
    line-height:30px;
    text-align:left;
    padding-left:5px;
}
.header .downbtn a:hover{
    text-decoration:underline;
    color:#f00;
}
.header .downbtn a{
    display:block;
    color:black;
    width:100%;    
}
    </style>
</head>
<body>
    <div class="header">
        <span> Dropdown list</span>        
        <div class="downbtn">
            <ul>
                <li> <a href=""> drop-down list 01</a></li>
                <li> <a href=""> drop-down list 02</a></li>
                <li> <a href=""> drop-down list 03</a></li>
                <li> <a href=""> drop-down list 04</a></li>
                <li> <a href=""> drop-down list 05</a></li>
            </ul>
        </div>
    </div>
</body>
</html>

The results are as follows:

2. Technical Essentials

  • Submenu hiding for drop-down menus (using display: none; hiding elements)
  • Mouse hover style (div: hover)
  • Relative positioning of parent elements (position: relative;)
  • Absolute positioning of sub-elements (position: absolute;)

The above is the whole content of this article. I hope it will be helpful to everyone’s study, and I hope you will support developpaer more.

Recommended Today

The method of obtaining the resolution of display by pyqt5

The code is as follows import sys from PyQt5.QtWidgets import QApplication, QWidget class Example(QWidget): def __init__(self): super().__init__() self.initUI() #Interface drawing to initui method def initUI(self): self.desktop = QApplication.desktop() #Get display resolution size self.screenRect = self.desktop.screenGeometry() self.height = self.screenRect.height() self.width = self.screenRect.width() print(self.height) print(self.width) #Show window self.show() if __name__ == ‘__main__’: #Create applications and objects app […]