ad

Simple DropDown Menu in HTML and CSS

Sexy-Drop-Down-Menu

DropDown Menu in HTML and CSS

Drop down menu looks nice and helps to keep more navigation links in less space. Createing a dropdown menu is easy with use of CSS and HTML lists elements. Create list items for menu items. Create list inside a list item to add child menu inside a menu item. It works by mouse hover or onmouseover to show the hidden menu child items.

CSS Part: Styling the dropdown menu items. You can change the color, font and style of menu items by changing the style attribute.

<style type="text/css">
/* ----- Main body tag styling -------- */
body,td,th {
font-family: Arial, Helvetica, sans-serif;
}
/* ----- dropdown backround ------*/
ul {
margin:0;
padding:0;
}
.dc{
display:inline;
position: relative;
z-index: 0;
margin:0;
padding:0;
}
.dc:hover{
background-color: transparent;
z-index: 50;
}
.dc ul{
position: absolute;
width:120px;
background-color: #999;
left: -1000px;
list-style-type:none;
visibility: hidden;
}
.dc:hover ul{
visibility: visible;
top: 16px;
left:0px;
}
/* --------- What the list items ----------- */
.dc ul li{
margin:0;
padding:0;
background-color: #EBEBEB;
margin:1px;
}
.dc ul li:hover {
background-color: #FFF;
margin:1px;
}
/* ------ links look inside the dropdown -------- */
.dc ul li a {
display:block;
padding:4px;
font-size:12px;
}
.dc ul li a:link {
color: #333;
text-decoration: none;
}
.dc ul li a:visited {
text-decoration: none;
color: #000;
}
.dc ul li a:hover {
text-decoration: none;
color: #333;
}
.dc ul li a:active {
text-decoration: none;
color: #333;
}
/* END PURE CSS DROP MENU */
</style>

 

HTML Part: In this HTML part, create menu items and sub menu items. These are only HTML lists. Add menu items and URLs .

<div class="dc">
<a href="#">Drop Menu 1</a>
<ul>
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
</ul>
</div>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<div class="dc">
<a href="#">Drop Menu 2</a>
<ul>
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
</ul>
</div>

 

If you have any kind off problem or doubt in the code, you can ask via comment

Tags: | |
Nord VPN Sale

Deepanker Verma is the founder of Techlomedia. He is a tech blogger, developer and gadget freak.


Similar Articles

0 Comments

Leave a comment

Comment policy: We love comments and appreciate the time that readers spend to share ideas and give feedback. However, all comments are manually moderated and those deemed to be spam or solely promotional will be deleted.

2020 UseThisTip | Developed By Deepanker