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 how Node.js handles ES6 modules

Table of contents 1. Differences between the two ...

Using front-end HTML+CSS+JS to develop a simple TODOLIST function (notepad)

Table of contents 1. Brief Introduction 2. Run sc...

Detailed explanation of JavaScript closure issues

Closures are one of the traditional features of p...

Detailed explanation of the basic use of react-navigation6.x routing library

Table of contents react-native project initializa...

How to implement blank space in Taobao with CSS3

Make a blank space for Taobao: When you shrink th...

How to use JavaScript to determine several common browsers through userAgent

Preface Usually when making h5 pages, you need to...

Mysql 5.6.37 winx64 installation dual version mysql notes

If MySQL version 5.0 already exists on the machin...

Vue template configuration and webstorm code format specification settings

Table of contents 1. Compiler code format specifi...

How to view MySQL links and kill abnormal links

Preface: During database operation and maintenanc...

Example of using CSS3 to customize the style of input multiple-select box

Principle: First hide the input element, then use...

MySql implements page query function

First of all, we need to make it clear why we use...

Linux beginners in virtual machines configure IP and restart the network

For those who are new to virtual machines or have...