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
Preface The simple understanding of MySQL permiss...
Preface A reverse proxy is a server that receives...
Table of contents 1. Draw a circle 2. Circle move...
Pull the image docker pull season/fastdfs:1.2 Sta...
Introduction yum (Yellow dog Updater, Modified) i...
Table of contents infer Case: Deepen your underst...
After setting up the MySQL master-slave, you ofte...
1. Installation Install using yum ##Automatically...
Looking at a website is actually like evaluating a...
Preface The project has requirements for charts, ...
<div id="root"> <h2>Keep go...
Table of contents 1. Introduction: 2. Prototype c...
This article shares the specific code of jQuery t...
Copy code The code is as follows: <!DOCTYPE ht...
Table of contents 1. Problems encountered 2. Idea...