How to style dropdown menu using CSS in HTML


Tags: jquery,html,css

Problem :

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



Solution :

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!


    CSS Howto..

    How to make the divider between two tbody elements moveable

    How to arrange this php if-statement which outputs ratings (good, great, exxelent, etc.)?

    How do I adjust position of a text inside a Bootstrap panel with overriden max-height?

    How can I position two to always be side by side

    I'm having trouble with Safari and CSS. How do I fix the issue without affecting Chrome?

    How can I make LIs push their siblings to the same height?

    How do I get this list to be seperated by a tab? (HTML/CSS)

    How can I put two divs shaped as circles next to each other?

    How can I trigger a jQuery alert when an iframe AND its CSS is loaded and rendered?

    How to get the same height on two Bootstrap columns? [duplicate]

    How to get a jQuery modal overlay to not push the scrollbar around?

    transition ease-out, right to left, how?

    Disappearing div using JQuery - how do I stop it from reloading next time a page is opened

    How to rotate the background image in css?

    How to get similar style as JQuery UI website itself

    How to draw a dotted line with css?

    How to set image in horizontal center of DIV to fill page width?

    How to make a braille interface for our website

    Formatting text, Suggestions with how-to?

    How do I achieve a hover over image effect?

    Why jQuery.css does not apply a property if it is not supported and how is this being checked?

    How to force a hover state with jQuery?

    How to styles labels only within fieldsets using CSS?

    How did Google make these 3d buttons? [closed]

    XPath how to find second element with CSS class name

    How to achieve a left and right background split leaving middle div visible?

    How to nest classes in css modules and react?

    How to embed a custom bitmap font into website using CSS

    How to make 1 table scrollable with fixed header without affecting other tables in Bootstrap

    Bootstrap: how to stack divs of different heights?