How to style dropdown menu using CSS in HTML

Question

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..

Fiddle

Please help my fiddle dropdown On Mouse hover to change just like in image

Why do you want to use jquery, if its possible with css. Use :hover — Carl0s1z
– Carl0s1z, Commented May 22, 2014 at 14:08
I suggest you use list items with nested items.. and use css when you can. — Carl0s1z
– Carl0s1z, Commented May 22, 2014 at 14:10
@CTravel I will thankfull to you if You suggest me in my codes..Please — user3664608
– user3664608, Commented May 22, 2014 at 14:13

Daniel Mason · Accepted Answer · 2014-05-22 14:16:08Z

1

Here is a really good step by step guide on how to create a pure CSS dropdown menu.

http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu

I'd advise doing this to minimize website load, reducing javascript use is usually a good idea, especially since you can use a bunch of animation types in CSS3 now!

answered May 22, 2014 at 14:16

Daniel Mason

2801 gold badge5 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Kinnectus Over a year ago

The example on that site is simple and straight to the point.

Collectives™ on Stack Overflow

How to style dropdown menu using CSS in HTML

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related