Menu Dropdown Css

Step HTML code : 


<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Tutorials</a>
<ul>
<li><a href="#">Photoshop</a></li>
<li><a href="#">Illustrator</a></li>
<li><a href="#">Web Design</a></li>
</ul>
</li>
        <li><a href="#">HELLO</a></li>
        <li><a href="#">BEELINE</a></li>
</ul>


Step CSS code : 

ul {
background:blue;
padding: 0 15px;
list-style: none;
position: relative;
display: inline-table;
}

ul li {
      float: left;
          }
ul li:hover {
        background: pink;
           }
ul li:hover a {
     color: #fff;
         }
ul li a {
   display: block; padding: 15px 30px;
   color: #757575; text-decoration: none;
       }

ul li:hover ul {
display: block;
}
ul ul {
display: none;
background: pink; border-radius: 0px; padding: 0;
position: absolute; top: 100%;
}

ul ul li {
    float: none;
    position: relative;
        }

ul ul li a {
                 padding: 10px 30px;
    color: #fff;
}
ul ul li a:hover {
     background: red;

        }

Result :

Posted in: IT Knowledge