How to make Dropdown menus using CSS
In this tutorial,I show you how to create dropdown menus using CSS.Here, I create nested dropdown menus.Menus are helpful to put link of many webpages of single or multiple websites and redirects to desired page.
Steps to make Dropdown menus :
- Create a new file, copy the following code and save it as dropdown.html.
<html>
<head>
<style>
*{margin:0px;padding:0;}
#menu ul{list-style:none;}
#menu ul li{background-color:red;width:300px; height:60px;
border:1px solid white;line-height:60px;text-align:center;
float:left;position:relative}
#menu ul li a{color:white;text-decoration:none; display:block;}
#menu ul li a:hover{background-color:blue;}
#menu ul ul{position:absolute;display:none;}
#menu ul li:hover > ul{display:block;}
#menu ul ul ul{margin-left:300px;top:0px;}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="#">menu1</a>
<ul>
<li><a href="#">submenu1</a></li>
<li><a href="#">submenu2</a>
<ul>
<li><a href="#">link1</a></li>
<li><a href="#">link2</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">menu2</a></li>
<li><a href="#">menu3</a></li>
<li><a href="#">menu4</a></li>
</ul>
</div>
</body>
</html>
{[['
']]}
']]}
No comments