How to figure out what is going on with this nice CSS horizontal menu? [closed]


Tags: css

Problem :

[edit] initially I thought he did it with javascript, as it actually turns out, he chose a CSS only approach.

So I stumbled over this blog: david walsh's blog about jquery css etc I really like the horizontal menu. I want to build something similar. I would have loved to look at how he did it.

What is a good way to find out what is going on there?



Solution :

This appears to be all CSS. In chrome, if you inspect element on one of the menu items, you'll see the basic structure as:

<nav>
    <ul>
        <li class=>
            <a>Link</a><!-- this is the main menu item -->
            <div>  <!-- this is the submenu -->
                <ul>
                    <li></li> <!-- submenu item -->
            </div>
        </li>
    </ul>
</nav>

Now, knowing all of this, you can click the button to activate hover on various elements, so you know which is getting the new styles.

When I activate hover on the nav > ul > li the submenu becomes visible.

nav>ul>li:hover .dropdown {
    display: block;
    opacity: 1;
}

When activating hover on the nav>ul>li>a, the little image pops up.

nav>ul>li.connect>a:hover,
nav>ul>li.connect>a:active,
nav>ul>li.connect>a:focus {
    background-position: -324px 46px;
}

    CSS Howto..

    HTML – Show menu on hover

    css responsive design: how to improve my page ?

    How to change text color (and background) on nav bar links when hovering? [duplicate]

    How to deselect a table's head and certain tds with css

    How to draw heart using HTML/CSS table?

    How to rotate an image by a random amount using CSS?

    How to get a fixed DIV to stay on top of an absolute?

    CSS selectors - how to select 'for' in CSS?

    How to adjust height of the div base on contents? [duplicate]

    How to load self hosted font files if the GoogleFont service is unavailable?

    How to get the min-height of the object when its parent is set to display none?

    How to make slide down menu to slide up?

    How to modify one element of a class without bothering the rest with the same CSS class?

    How to CSS style a table such that cells is at most 30% of screen height and use a scroll bar when it's taller?

    How does CSS works under the hood? [closed]

    How do I wrap a overflowed span in fixed div

    How to do the right positioning of css elements?

    how to i convert this asp.net list to html list?

    How to use ASP.NET Authorization Yet Permit Access to .css Files?

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

    CSS Keyframes: How to move div to certain position

    how to solve slideshow css problem?

    how to format a single html a href text to have multiple css properties (two different font families)

    How to not inherit CSS styles from parents? [duplicate]

    what is jquery CSS frame work and how to use the frame work for giving look and feel to the website? [closed]

    CSS / bxSlider: How to avoid that Images are overlapping parent div

    Show content on and off with Javascript

    How to show/hide content on click with CSS

    How to scale a .svg being the background in a div?

    HTML/CSS Making a textbox with text that is grayed out, and disappears when I click to enter info, how?