EffectThe pictures in the code can be changed by yourself 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
Use wget command to download the entire subdirect...
Table of contents 1. Background 2. What is a virt...
HTTP Header Explanation 1. Accept: Tells the web s...
Table of contents 1. Install vue-video-player 2. ...
Implementation of time comparison in MySql unix_t...
This article is based on the Windows 10 system en...
First, let's introduce several common operati...
What is HTML? HTML is a language used to describe...
0x00 Introduction WordPress is the most popular C...
Why is NULL so often used? (1) Java's null Nu...
Preface Here are the steps to install and configu...
Table of contents Single-machine deployment Onlin...
@vue+echarts realizes the flow effect of China ma...
Table of contents 1. Problem Description 2. Probl...
1. Create a test table CREATE TABLE `mysql_genara...