The menu bar can be used in many places, especially the menu bar with drop-down menus list. This article mainly introduces how to implement navigation bar drop-down menu list with HTML and CSS.
1. How To Use HTML, CSS To Implement Navigation Bar Drop-Down Menu Example Source Code.
- First, let us create an Html file implement_navigator_drop_down_menu_with_html_css.html.
- Copy the below Html source code into the above Html file and save it.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Use HTML, CSS To Implement Navigation Bar Drop-Down Menu Example</title> <style> .header{ height: 120px; width: 1046px; margin: 0 auto; } .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: #aa0000; } .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; } * { 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; } </style> </head> <body> <header class="header"> <div class="header_right"> <ul> <a href="#"> <li class="show_list"> <span>Language</span> <ul class="move_list"> <li>Python</li> <li>Java</li> <li>JavaScript</li> <li>C++</li> <li>Html</li> </ul> </li> </a> </ul> </div> </header> </body> </html>
- Open the above Html file in a web browser, then you can get the below web page, when you move your mouse over the menu Language, it will show the drop-down menu list below it.