Home / html/csstut / How to Make Drop Down Menu With CSS

How to Make Drop Down Menu With CSS

-


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







How to Make Drop Down Menu With CSS How to Make Drop Down Menu With CSS Reviewed by Admin on 23:27 Rating: 5

No comments:

Subscribe to: Post Comments ( Atom )

Follow and +1 Us

Powered by Blogger.