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

Detailed explanation of MLSQL compile-time permission control example

Preface The simple understanding of MySQL permiss...

Simple steps to configure Nginx reverse proxy with SSL

Preface A reverse proxy is a server that receives...

How to install FastDFS in Docker

Pull the image docker pull season/fastdfs:1.2 Sta...

Linux yum package management method

Introduction yum (Yellow dog Updater, Modified) i...

In-depth understanding of the use of the infer keyword in typescript

Table of contents infer Case: Deepen your underst...

Detailed explanation of how Zabbix monitors the master-slave status of MySQL

After setting up the MySQL master-slave, you ofte...

Good website copywriting and good user experience

Looking at a website is actually like evaluating a...

CSS polar coordinates example code

Preface The project has requirements for charts, ...

An article teaches you JS function inheritance

Table of contents 1. Introduction: 2. Prototype c...

jQuery implements Table paging effect

This article shares the specific code of jQuery t...

HTML fixed title column, title header table specific implementation code

Copy code The code is as follows: <!DOCTYPE ht...