CSS Dropdown


Go to main Page

Dropdown in CSS

Now we are going to create dropdown in CSS.






Dropdown Code



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Div</title>
</head>
<style>
    *{
        margin: 0px;
        padding: 0px;

    }
    body{


        font-family: Arial;
        background-image: url("neelum.JPG");
        background-size:cover;


    }
#manu{

    width: 70%;
   margin: auto;
}
    #manu ul{
     list-style: none;

    }
#manu ul li{
  background: firebrick;
    border:1px solid white;
    width:100px;
    height:45px;
    line-height:45px ;
    text-align: center;
    float: left;
   position: relative;
}

#manu ul li a{
    text-decoration: none;
    color: white;
    display: block;
}
    #manu ul li a:hover{

        background: #F9CF02;

    }
#manu ul ul{

    position: absolute;
    display: none;
}
    #manu ul li:hover > ul{
        display: block;
    }

    #manu ul ul ul {
margin-left: 100px;
    }
</style>



<body>




    <div id="manu">

       <ul >

          
           <li><a href="">Services</a>
           <ul>
               <li><a href="">Web development</a> </li>
               <li><a href="">Youtube SEO</a> </li>
               <li><a href="">Video Editing</a>
               <ul>
                   <li><a href="">Motion Graphics</a> </li>
                   <li><a href="">Youtube video</a> </li>
                   <li><a href="">video</a> </li>
               </ul>
               </li>
              
           </ul>
           </li>

          


       </ul>
    </div>








</body>
</html>