HTML+CSS to implement the sample code of the navigation bar drop-down menu

HTML+CSS to implement the sample code of the navigation bar drop-down menu

Effect

The pictures in the code can be changed by yourself

insert image description here

Drop-down menu HTML code

<header class="header">
        <div class="header_left">
            <img src="img/logo.jpg">
        </div>
        <div class="header_right">
                <div class="number_right">
                    <img src="img/number.jpg">
                </div>
                <ul>
                    <a href="#"><li>Home</li></a>
                    <a href="#"><li class="show_list">
                        Success Stories
                        <ul class="move_list">
                            <li>Brand design</li>
                            <li>Web design</li>
                            <li>Graphic design</li>
                            <li>Electronic store</li>
                            <li>Space/Architecture</li>
                        </ul>
                    </li></a>
                    <a href="#"><li>I want to design</li></a>
                    <a href="#"><li>Online consultation</li></a>
                    <a href="#"><li>Member Registration</li></a>
                    <a href="#"><li>Member Login</li></a>
                </ul>
        </div>
    </header>

Drop-down menu CSS code

.header{
    height: 120px;
    width: 1046px;
    margin: 0 auto;
}
.header_left{
    float: left;
    line-height: 120px;

}
.header_left img{
    width: 300px;
    height: 100px;
}
.header_right{
    float: right;
    height: 120px;
    position: relative;
}
.header_right>div{
    position: absolute;
    top: 0;
    right: 0;

}
.header_right ul{
    margin-top: 88px;

}
.header_right ul a li{
    border-right: 1px solid #000000;
    height: 13px;
    font-size: 15px;
    padding: 0 25px;
    font-weight: bold;
    color: #666;

}
.header_right ul a{
    float: left;
    line-height: 13px;

}
.header_right ul a li:hover{
    color: #000000;
}
.header_right ul a:last-child li{/*remove the last border*/
    border: none;
}
.show_list{
    position: relative;
}
.show_list .move_list{
    display: none;
    z-index: 103;
    position: absolute;
    top: -56px;
    left: 0;
    width: 100%;
    background: #333;
    text-align: center;
}
.show_list .move_list li{
    padding: 10px 0;
    width: 114px;
    color: #fff;
}
.header_right ul a .show_list{
    padding-bottom: 20px;
    border-right: none;
}
.show_list:hover .move_list{
    display: block;
}
.header_right ul a:nth-child(3){
    border-left: 1px solid #000;
}
.show_list .move_list li:hover{
    color: white;
    background: orange;
}

After writing the above code, you must add the CSS reset code, the code is as follows:

* {
    margin: 0;
    padding: 0
}
em,i {
    font-style: normal
}
li {
    list-style: none
}
a{
    font: 14px/24px Microsoft YaHei,Arial,\\5B8B\4F53,Arial Narrow;
    letter-spacing: 1.2px;
    color: #666;
    text-decoration: none
}
a:hover {
    color: #c81623 ;
}

img {
    border: 0;
    vertical-align: middle
}
input{
    outline: none;
}
button {
    cursor: pointer;
    border:none;
    outline: none;
}

This concludes this article about the sample code for implementing a navigation bar drop-down menu with HTML+CSS. For more relevant HTML+CSS navigation bar drop-down menu content, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope that everyone will support 123WORDPRESS.COM in the future!

<<:  Pure HTML+CSS to achieve typing effect

>>:  Sample code for implementing the Olympic rings with pure HTML+CSS

Recommend

wget downloads the entire website (whole subdirectory) or a specific directory

Use wget command to download the entire subdirect...

Implementation of React virtual list

Table of contents 1. Background 2. What is a virt...

HTTP header information interpretation and analysis (detailed summary)

HTTP Header Explanation 1. Accept: Tells the web s...

How to use vue-video-player to achieve live broadcast

Table of contents 1. Install vue-video-player 2. ...

Common date comparison and calculation functions in MySQL

Implementation of time comparison in MySql unix_t...

Example of using setInterval function in React

This article is based on the Windows 10 system en...

PHP scheduled backup MySQL and mysqldump syntax parameters detailed

First, let's introduce several common operati...

Detailed explanation of basic concepts of HTML

What is HTML? HTML is a language used to describe...

Analysis of the reasons why MySQL field definitions should not use null

Why is NULL so often used? (1) Java's null Nu...

Detailed steps for installing and configuring MySQL 8.0 on CentOS

Preface Here are the steps to install and configu...

Docker installation and configuration steps for RabbitMQ

Table of contents Single-machine deployment Onlin...

vue+echarts realizes the flow effect of China map (detailed steps)

@vue+echarts realizes the flow effect of China ma...

Solutions to the failure and invalidity of opening nginx.pid

Table of contents 1. Problem Description 2. Probl...

MySQL loop inserts tens of millions of data

1. Create a test table CREATE TABLE `mysql_genara...