Drop Down button

 <h2>nagetive bar</h2>

<style>

*{margin-top:0px; padding:0px;}

#container{width:100%; height:50px; background:red; padding:5px;text-align:center;border-radius:10px;}

#container .q li{list-style:none;display:inline-flex;width:150px;background:gray;height:40px;Padding:5px;float:left;color:white;font-size:19px;position:relative;border-radius:10px;

}

#container .q li ul{color:red;}

#container .q li:hover{

background-color:green;}

#container .q li ul{

display:none;

}#container .q li ul li{

}

#container .q li:hover > ul{

display:block;

}

#container .q li ul{

margin-left:20px;top:50px;position:absolute;

}

</style>

<div id="container">

<ul class="q">

<li>song 

<ul >

<li>1</li>

<li>2</li>

</ul>

</li> <li><a href="#">

    <b>sanam r</b></a>

    <ul class="w"><li>

    jio</li>

    <li>contact

    </li>

    <li>moh</li>

    <li>about</li>  </ul></li>

    </ul>

</div>

Output

nagetive bar

• song
  • 1
  • 2
• sanam r
  • jio
  • contact
  • moh
  • about