/ Published in: CSS
The below is used to create a navigation bar without submenus using HTML and CSS
Expand |
Embed | Plain Text
Copy this code and paste it in your HTML
<html> <head> <title>Navigation Bar without Submenu Using Html and CSS</title> </head> <style> body{ background-image:url(images1/bg.png) } a{ text-decoration:none; } #menu_holder{ width:350px; height:30px; } #menu_holder ul { list-style-type:none; font-family: 'Merienda', cursive; font-size:12pt; color:#990000; padding:5px; } #menu_holder li { display:inline; color:#30C; padding:5px; } #menu_holder li a:hover{ display:inline; color:#990000; font-size:12pt; padding:5px; border-bottom:solid 5px #e77918; } .active_menu{ border-bottom:solid 3px #e77918; } </style> <body> <div id="menu_holder"> <ul> <li><a href="#" class="active_menu">MENU 1</a></li> <li><a href="#">MENU 2</a></li> <li><a href="#">MENU 3</a></li> <li><a href="#">MENU 4</a></li> </ul> </div> </body> </html>
URL: www.littleboycreations.com/navigation_bar.html