Assalam o Alaikum friend today i am going to show you how to create a beautiful dropdown menu in css and html without using javascript and jquery.
first of all open a new document in any text editor and paste the following code in the document. and save it with .html extension.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>css Dropdown menue</title>
<style type="text/css">
#Menu
{
margin-left:40px;
width:50%;
text-align:center;
background:#F93;
color:#FFFFFF;
border-radius:10px;
}
ul li
{
background:#F93;
list-style:none;
display:inline-block;
padding:10px;
}
ul li ul li
{
list-style:none;
display:block;
margin-left:-10px;
width:100%;
}
ul li ul
{
position:absolute;
margin-top:10px;
margin-left:-10px;
text-align:left;
width:100px;
padding:10px;
display:none;
}
ul li:hover
{
background:#333333;
cursor:pointer;
}
ul li:hover ul
{
position:absolute;
text-align:left;
width:100px;
display:block;
}
</style>
</head>
<body>
<div id="Menu">
<ul>
<li>Home</li>
<li>About</li>
<li>Products
<ul>
<li>Product 1</li>
<li>Product 2</li>
<li>Product 3</li>
</ul>
</li>
<li>Something
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link n</li>
</ul>
</li>
<li>Contact</li>
</ul>
</div>
</body>
</html>
.
after that view the document in any browser and you will see the following output.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>css Dropdown menue</title>
<style type="text/css">
#Menu
{
margin-left:40px;
width:50%;
text-align:center;
background:#F93;
color:#FFFFFF;
border-radius:10px;
}
ul li
{
background:#F93;
list-style:none;
display:inline-block;
padding:10px;
}
ul li ul li
{
list-style:none;
display:block;
margin-left:-10px;
width:100%;
}
ul li ul
{
position:absolute;
margin-top:10px;
margin-left:-10px;
text-align:left;
width:100px;
padding:10px;
display:none;
}
ul li:hover
{
background:#333333;
cursor:pointer;
}
ul li:hover ul
{
position:absolute;
text-align:left;
width:100px;
display:block;
}
</style>
</head>
<body>
<div id="Menu">
<ul>
<li>Home</li>
<li>About</li>
<li>Products
<ul>
<li>Product 1</li>
<li>Product 2</li>
<li>Product 3</li>
</ul>
</li>
<li>Something
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link n</li>
</ul>
</li>
<li>Contact</li>
</ul>
</div>
</body>
</html>
.
after that view the document in any browser and you will see the following output.
No comments:
Post a Comment