Simple Pure HTML-CSS Single Level Top Drop Down Menu

After numerous Menu Bar that we shared already in our blog, here we are with new one and this time we focused of straightforward and shot coding yet additionally remembered the outline so here we have our basic single level dropdown menu that depends on HTML-CSS and there is no picture, javascript or jquery included. Okay, time to attempt an unadulterated CSS dropdown menu tutorial.

While some offer straightforward connection show through records, different sites pick in utilizing drop down menus as route alternatives for making a site that is without messiness and cleaner-looking. It likewise spares a great deal of space, which can be utilized for notices and substance that is more important. Also, in light of the fact that there are destinations that run with various topics, site proprietors are provoked to locate the best codes that would superbly fit to their site from these 35 drop down menu contents that are justified regardless of the look.

Today you’ll learn how to create your own CSS dropdown menu, without any additional Javascript code. There are no images used and, as usual, minimal HTML markup. Let’s see how is made. But before proceeding don’t forget to check out the DEMO.

Features:

1.) Pure HTML-CCAdded.
2.) No JavaScript Or JQuery File.
3.) Simple HTML -CSS Added.
4.) Simple And Fast Loading Code.
5.) Can Work With Any Browser.

How To Add In A WebPage?

1.) Just Go To Your “Web Page File”.
2.) Now “Copy” The Below Codes And “Paste” It To There Positions.
3.) “Save” It, Now You Are Done.

CSS:

<style>
/* Single Level Top Menu Bar
----------------------------------------------- */
nav {background:#000000;lheight:50px;width:100%;text-transform:uppercase;}
nav ul {list-style-type:none;height:50px;}
nav ul li {float:left;}
nav ul li a {line-height:50px;margin:0 10px;display:block;color:#FFFFFF;text-decoration:none;font-size:14px;}
nav ul li ul {position:absolute;left:-9999px;top:-9999px;list-style-type:none;}
nav ul li ul li a {line-height:30px;margin:0px;display:block;color:#FFFFFF;text-decoration:none;font-size:12px;}
nav ul li:hover {position:relative;background:#008888;}
nav ul li:hover ul {left:0px;top:50px;background:#008888;padding:0px;}
nav ul li:hover ul li a {display:block;width:200px;text-indent:15px;background:#008888;}
nav ul li:hover ul li a:hover {background:#000000;}
</style>

HTML:

<nav> 
<nav> 
<ul> 
<li style="background:#008888;"><a><b>Shop Management System</b></li> 
<li><a href="dashboard.php">Dashboard</a></li> 
<li><a href="">Link 1</a> <ul> 
<li><a href="">Sub Link 1</a></li> 
<li><a href="">Sub Link 2</a></li> 
</ul> </li> 
<li><a href="">Link 2</a> <ul> 
<li><a href="">Sub Link 1</a></li> 
<li><a href="">Sub Link 2</a></li> 
<li><a href="">Sub Link 3</a></li> 
<li><a href="">Sub Link 4</a></li> 
</ul> </li> 
<li><a href="">Link 3</a> <ul> 
<li><a href="">Sub Link 1</a></li> 
<li><a href="">Sub Link 2</a></li> 
<li><a href="">Sub Link 3</a></li> 
<li><a href="">Sub Link 4</a></li> 
</ul> </li> 
</ul> 
</nav>

Customization:

1.) Edit Your HTML-CSS As Per Your Requirements. Rest Is Ok For General Us. If You Are Pro, Then You Can Do Any Thing.

Last Words:

That’s all we have. If you have any problem with this code in your template then feel free to contact us with full explanation of your problem. We will reply you as time allow to us. Don’t forget to share this with your friends so they can also take benefit from it and leave your precious feedback in our comment form below. Happy blogging, See you in next article…