How to style dropdown menu using CSS in HTML
I have a dropdown Menu using HTML and CSS. At present it is simple and working but as per my requirement i want my dropdown to be similar to this image ... Please refer sample image at..Sample DropdownImage Image
I want my dropdown to change like this as soon as Mouse hover reaches just like this angular design with line in between two links.
Here i have tried to create a fiddle but my jquery is not working fine so my mouse hover event is not working..
Here is my HTML..
<div class='menu'> <a class='hover-link'>ABOUT US</a> <div class='sub'> <ul class='sub-options'> <li><a href='#'>Home</a> </li> <li><a href='#'>About</a> </li> <li><a href='#'>Services</a> </li> <li><a href='#'>Contact</a> </li> </ul> </div> </div> </div>
Please see my fiddle..
Please help my fiddle dropdown On Mouse hover to change just like in image
Here is a really good step by step guide on how to create a pure CSS dropdown menu.