This article will explain you how to create a Dropdown Menu in Html and CSS using Html <div> tags. We will start with designing a container using a <div> tag. The <div> tag will contain id of navigation. A navigation menu always requires standard Html as a basic tool for menu designing. To design the menu we will use a <div>, <ul> an <li> tags. In this example I have created two different menus. One for English Interface (ltr) and another for Arabic Interface (rtl). These menus can be used in ASP.Net Bilingual Web Applications
/* Main menu style */ .nav, .nav ul{ list-style: none; margin: 0; padding: 0; font-size: 13px; font-family: Trebuchet MS, Verdana, Arial; /* text-shadow:2px 2px 2px rgba(0,0,0,.3);*/ } .nav{ position: relative; } .nav ul{ height: 0; left: 0; overflow: hidden; position: absolute; top: 42px; } .nav li{ float: left; position: relative; } .nav li a{ background-color: #00688B; border: 1px solid transparent; color: #FFF; display: block; line-height: 20px; padding: 10px 20px; text-decoration: none; } .nav li:hover > a{ background: #FF6103; color: #FFF; } .nav li:hover ul.subs{ height: auto; width: 130px; } .nav ul li{ width: 100%; } .nav ul li a{ background-color: #00688B; border-top: 1px solid #ffffff; color: #fff; line-height: 1px; padding: 5px 20px; } .nav li:hover ul li a{ line-height: 22px; }
<!DOCTYPE html> <html> <body dir="ltr"> <ul class="nav"> <li><a href="#">Home</a></li> <li><a href="#">Products</a> <ul class="subs"> <li><a href="#">Product 1</a></li> <li><a href="#">Product 2</a></li> <li><a href="#">Product 3</a></li> </ul> </li> <li><a href="#">Client</a> <ul class="subs"> <li><a href="#">Client 1</a></li> <li><a href="#">Client 2</a></li> </ul> </li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </body> </html>