Hellow all. I am a learner of web design. Recently I have learnt how to create drop down menu with HTML & CSS. Now I teach you how to do it. To do it, you need two software named notepad++/brackets and any browser like firefox. First, open the notepad++ or brackets and write the HTML and CSS code which is given below……..
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<head>
<title>Drop down menu</title>
<style type="text/css">
body{
}
/*-----------full page---------*/
div.full_page{
background-color:#D6DDEF;
width:900px;
height:1040px;
margin-left:220px;
margin-top:50px;
box-shadow:0px 0px 10px 3px silver;
margin-bottom:50px;
border-radius:8px 8px 8px 8px;
}
/*-----------main menu bar-------*/
ul{
font-family:sans-serif;
margin: 0;
padding: 0;
list-style: none;
float:left;
}
ul li{
display:block;
position:relative;
float:left;
width:180px;
text-align:center;
}
li ul{
display:none;
}
li ul li{
text-align:left;
}
ul li a{
display:block;
text-decoration:none;
color:black;
padding: 5px 15px 5px 15px;
background:-moz-linear-gradient(rgb(75,0, 130), rgb(10,10,10)) repeat scroll 0% 0% transparent;
margin-left:1px;
white-space:nowrap;
color:white;
font-weight:;
text-transform:uppercase;
}
ul li a:hover{
background:-moz-linear-gradient(rgb(249, 249, 249), rgb(229, 229, 229)) repeat scroll 0% 0% transparent;
color:black;
}
li:hover ul{
display:block;
position:absolute;
}
li:hover li{
float:none;
}
li:hover a{
color:balck;
}
li:hover li a:hover{
}
/*---------body container-------*/
div.body_container{
background-color:#E4E4E4;
width:900px;
height:900px;
}
/*------logo-------*/
div.logo{
height:100px;
background-color:;
width:900px;
}
/*------------footer-------*/
div.footer{
background-color:#7E8A96;
height:40px;
width:900px;
}
</style>
</head>
<body>
<div class="full_page">
<div class="logo">
</div>
<div class="body_container">
<div class="menu">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#" >SEARCH</a>
<ul>
<li><a href="http://www.google.com/" target="_blank">GOOGLE</a></li>
<li><a href="http://www.yahoo.com/" target="_blank">YAHOO</a></li>
<li><a href="http://www.bing.com/" target="_blank">BIng</a></li>
</ul>
</li>
<li><a href="#">freelance</a>
<ul>
<li><a href="http://codeexercise.com/how-to-create-html-order-list-unorder-list/" target="_blank">Freelancer</a></li>
<li><a href="http://codeexercise.com/how-to-create-html-order-list-unorder-list/" target="_blank">odesk</a></li>
<li><a href="http://codeexercise.com/how-to-create-html-order-list-unorder-list/" target="_blank">guru</a></li>
<li><a href="http://codeexercise.com/how-to-create-html-order-list-unorder-list/" target="_blank">elance</a></li>
</ul>
</li>
<li><a href="#">movie</a>
<ul>
<li><a href="http://codeexercise.com/how-to-create-html-order-list-unorder-list/">Wanted</a></li>
<li><a href="http://codeexercise.com/how-to-create-html-order-list-unorder-list/">The Notebook</a></li>
<li><a href="http://codeexercise.com/how-to-create-html-order-list-unorder-list/">Wall e</a></li>
<li><a href="http://codeexercise.com/how-to-create-html-order-list-unorder-list/">Hercules</a></li>
</ul>
</li>
<li><a href="#">Social Media</a>
<ul>
<li><a href="http://codeexercise.com/how-to-create-html-order-list-unorder-list/" target="_blank">Facebook</a></li>
<li><a href="http://codeexercise.com/how-to-create-html-order-list-unorder-list/" target="_blank">Twitter</a></li>
<li><a href="http://codeexercise.com/how-to-create-html-order-list-unorder-list/" target="_blank">Whatsapp</a></li>
<li><a href="http://codeexercise.com/how-to-create-html-order-list-unorder-list/" target="_blank">Imo</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div class="footer">
</div>
</div>
</body>
</html>
After completing writting save it with name index.html. Then open the save file with browser like firefox, crome, operamini etc and you will see the drop down menu.
Table of Contents
Show
Dont copy past these code, write it by yourself and practice more and more. this is just begining for today, I will post more article in future about HTML and CSS. Just stay connected with us. For more information contact with us.
E-mail: [email protected]
