Dropdown Menu in HTML and CSS.
Aslam u alikum friends today i am going to explain you how to create a professional drop-down menu using html and css.See fig.1 below
1. Now open your text editor which ever you have.
2. past all of the below code in your text editor document.
| <html> | |
| <head><title>DropdownMeue</title> | |
| <style type="text/css"> | |
| *{margin: 0px; | |
| padding: 0px;} | |
| body{font-family: verdana; | |
| background-color: #ABC; | |
| padding: 50px;} | |
| /*rules for navogation menue*/ | |
| /* ==========================*/ | |
| ul#navmenue{ | |
| list-style: none; | |
| } | |
| ul#navmenue,ul.sub1,ul.sub2{ | |
| list-style-type:none; | |
| } | |
| ul#navmenue li{ | |
| width: 125px; | |
| text-align: center; | |
| position: relative; | |
| float: left; | |
| margin-right: 5px; | |
| } | |
| ul#navmenue li a{ | |
| text-decoration: none; | |
| display: block; | |
| width: 125px; | |
| height: 25px; | |
| line-height: 25px; | |
| background-color: #FFF; | |
| border-radius: 5px; | |
| } | |
| ul#navmenue .sub1 a{ | |
| margin-top: 5px; | |
| } | |
| ul#navmenue .sub1 li{ | |
| } | |
| ul#navmenue .sub2 a{ | |
| margin-left: 10px; | |
| } | |
| ul#navmenue li:hover>a{ | |
| background-color: #CFC; | |
| } | |
| ul#navmenue li:hover a:hover{ | |
| background-color:#FF0; | |
| } | |
| ul#navmenue ul.sub1{ | |
| display: none; | |
| position: absolute; | |
| top: 26px; | |
| left: 0px; | |
| } | |
| ul#navmenue ul.sub2{ | |
| display: none; | |
| position: absolute; | |
| top: 0px; | |
| left: 125px; | |
| } | |
| ul#navmenue li:hover .sub1{ | |
| display: block; | |
| } | |
| ul#navmenue .sub1 li:hover .sub2{ | |
| display: block; | |
| } | |
| .downarrow{font-size: 12pt; | |
| position: absolute; | |
| top: 3px; | |
| right: 4px;} | |
| .rightarrow{font-size: 12pt; | |
| position: absolute; | |
| top: 5px; | |
| right: 4px;} | |
| </style> | |
| </head> | |
| <body> | |
| <div > | |
| <ul id="navmenue"> | |
| <li><a href="#" id="onlink">Home</a></li> | |
| <li><a href="#">AboutUs</a></li> | |
| <li><a href="#">Products</a><span class="downarrow">▼</span> | |
| <ul class="sub1"> | |
| <li><a href="#">product1</a></li> | |
| <li><a href="#">Product2</a></li> | |
| <li><a href="#">Product3</a></li> | |
| </ul> | |
| </li> | |
| <li><a href="#">Services</a><span class="downarrow">▼</span> | |
| <ul class="sub1"> | |
| <li><a href="#">product1</a></li> | |
| <li><a href="#">Product2</a></li> | |
| <li><a href="#">Product3</a><span class="rightarrow">▶</span> | |
| <ul class="sub2"> | |
| <li><a href="#">Catogry1</a></li> | |
| <li><a href="#">Catogry2</a></li> | |
| <li><a href="#">Catogry3</a></li> | |
| </ul> | |
| </li> | |
| </ul> | |
| </li> | |
| <li><a href="#">Contact</a></li> | |
| </ul> | |
| </div> | |
| </body> | |
| </html> 3. save it as a html document and see the result in your browser. ==========.Thanks for reading the tutorial and share with friends.============= |
