HTML MENU CONTROL FOR ASP.NET

A html menu control example in ASP.NET to make your webpage look more professional. Good alternative to traditional looking menu control. Inbuilt asp.net menu control in Visual Studio has got very limited functionality. So here’s a very good looking asp.net menu control made with HTML (ul and li). Comment below, do let me know what you think about this code.

ASPX PAGE CODE :

<div>
 <nav id="mymenu">
<ul>
 <li><a href="#">Home</a></li>
 
 <li><a href="#">Menu 1</a></li>
 <li><a href="#">Menu 2</a></li>
 
 <li><a href="#">Menu 3.1</a>
 <ul>
 <li><a href="#">Menu 3.1</a></li>
 <li><a href="#">Menu 3.2</a></li>
 </ul>
 </li>
 <li><a href="#">Menu 4</a>
 <ul>
 <li><a href="#">Menu 4.1</a></li>
 <li><a href="#">Menu 4.2</a></li>
 </ul>
 </li>
 </ul>
</nav>
 </div>

And its CSS :

<style type="text/css">
 #mymenu
 {
 margin-top: 15px;
 margin-left: 10px;
 }
 #mymenu ul
 {
 list-style: none;
 position: relative;
 float: left;
 margin: 0;
 background-color:#000;
 padding: 0;
 }
 #mymenu ul a
 {
 display: block;
 color: #ffffff;
 text-decoration: none;
 font-weight: lighter;
 font-size: 15px;
 line-height: 32px;
 padding: 0 15px;
 font-family: 'Montserrat' , sans-serif;
 }
 #mymenu ul a : hover
 {
 color: #000;
 }
 #mymenu ul li
 {
 position: relative;
 float: left;
 margin: 0;
 padding: 0;
 }
 #mymenu ul li.current-menu-item > a
 {
 color: #ff4a4a;
 }
 #mymenu ul li:hover > a
 {
 color: #ff4a4a;
 }
 #mymenu ul ul
 {
 display: none;
 position: absolute;
 top: 100%;
 left: 0;
 background: #000;
 padding: 0;
 }
 #mymenu ul ul li
 {
 float: none;
 width: 200px;
 }
 #mymenu ul ul a
 {
 line-height: 120%;
 padding: 10px 15px;
 }
 #mymenu ul ul ul
 {
 top: 0;
 left: 100%;
 }
 #mymenu ul li:hover > ul
 {
 display: block;
 }
 </style>