0


Hello Friends,
        Today I am gonna to teach you how to make a drop down menu as you seen that there are so many sites having Drop Down Navigation Menu when ever you hover on that you just seen an drop down menu for further categories of that menu
now don't waste time I just start how to make drop down Menu
First of all you have to make a HTML Page and HTML codes:
STEP 1: Write HTML Codes:

<!DOCTYPE html >
<html >
<head>
<title>how to make drop down menu by CSS</title>
<link href="mycss.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div>
<ul>
      <li>Home</li>
      <li>portfolio</li>
      <li>drop down
         <ul>
               <li>first</li>
               <li>second</li>
               <li>third</li>
        </ul>
      </li>
      <li>contact us</li>
</ul>
</div>
</body>
</html>
SEE VIDEO IF YOU HAVE ANY PROBLEM 

Step 2: Add Below CSS in Another Notepad Page Saved as "mycss.css"

div{
background-color:black;
}
ul{
list-style:none;
}
ul li{
float:left;
margin-left:10px;
background-color:green;
color:white;
width:80px;
text-align:center;
}
ul li ul{
display:none;
position::relative;
float:left;
}
ul li ul li{
float:none;
position:relative;
left:-50px;
width:80px;

}


ul li:hover ul{
display:block;
overflow:hidden;
}

Save both the pages and then open these page in Browser You will get drop down menu
see video







Post a Comment Blogger

 
Top
Don't Forget To Join US Our Community
Follow Us On Twitter
Plus One US
×