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
Table of contents 1. Differences between the two ...
Table of contents 1. Brief Introduction 2. Run sc...
Closures are one of the traditional features of p...
Just 15 lines of CSS to crash your iPhone Securit...
Table of contents react-native project initializa...
Make a blank space for Taobao: When you shrink th...
Nginx is a high-performance website server and re...
Preface Usually when making h5 pages, you need to...
If MySQL version 5.0 already exists on the machin...
Table of contents 1. Compiler code format specifi...
Preface: During database operation and maintenanc...
Principle: First hide the input element, then use...
First of all, we need to make it clear why we use...
Application example website http://www.uhuigou.net...
For those who are new to virtual machines or have...