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

Add a Comment

Your email address will not be published. Required fields are marked *