How to position a vertical menu as nested
    under horizontal parent


Tags: html,css,html-lists

Problem :

We're really close to solving this one and just need a little help to ties things off. Everything works fine, but how do we get the nested 'ul' to display relative to it's parent 'li' (ie. directly below parent li)?

Here's the HTML:

<ul id="continent">
        <li><a href="#">Europe</a>
            <ul>
            <li><a href="#">CountryA</a></li>
            <li><a href="#">CountryB</a></li>
            <li><a href="#">CountryC</a></li>
            </ul>
        </li>
        <li><a href="#">Middle East</a>
            <ul>
            <li><a href="#">CountryD</a></li>
            <li><a href="#">CountryE</a></li>
            <li><a href="#">CountryF</a></li>
            </ul>
        </li>
        <li><a href="#">Africa</a>
            <ul>
            <li><a href="#">CountryG</a></li>
            <li><a href="#">CountryH</a></li>
            <li><a href="#">CountryI</a></li>
            </ul>
        </li>
        <li><a href="#">Asia</a>
            <ul>
            <li><a href="#">CountryJ</a></li>
            <li><a href="#">CountryK</a></li>
            <li><a href="#">CountryL</a></li>
            </ul>
        </li>
</ul>

And here the CSS:

ul#continent{position:relative;}
ul#continent li{display:inline; list-style-type:none;}

ul#continent li ul{display:none;}
ul#continent li:hover {cursor:pointer;}
ul#continent li:hover ul{display:block; position:absolute; top:52px; margin:-20px 0 0 -10px; padding:20px; width:160px; z-index:999;}
ul#continent li:hover ul li{display:block; padding:3px 10px;}

Thanks in advance for any help!



Solution :

Use float:left; and float:none; instead of display:inline;. And than play with margin or padding.

ul#continent li{float:left; list-style-type:none;}
ul#continent li:hover ul li{float:none; padding:3px 10px;}

DEMO

In demo 2 you see it with some background-color, width & height, margin and text-align changes in the css how it looks like.

DEMO 2


    CSS Howto..

    How to wrap between letter and punctuation to avoid extra blank space in the end of line?

    How to share js/css/images across Rails applications?

    How can Shake FilePatterns be used to minify JS and CSS files?

    How do I hide text that is not wrapped in

    or ?

    How to position two
  • 's within a nested
      ?
  • how to center background image in window resize

    How to apply different image styles to the same image used on main html page and pop up modal

    selenium - how to click on a link based on its text using css instead of xpath and without using the contains operator?

    How to change css using jquery in a php loop

    How to make a child div to grow to full screen using CSS?

    Messed up slides in custom minimal JS/CSS slideshow

    How to link some text next to copyright in CSS

    How to keep css content position when zooming in and out?

    how to override user agent CSS

    how to make nested flexboxes work

    How to make CSS 3 columns stay in their posisiton?

    HTML/CSS: How to get the id of sub menu

    How to override css-setting for the elements of nested table?

    How to scale html font size in Bootstrap 4 without breaking responsive navbar

    How to make specific checkbox items bold (not all) via CSS?

    How to target a specific browser of a specific device via CSS?

    Error: Dynamically fetching css from CDN with fallback to local copy, How to resolve?

    How to make one css input type be displayed the same as another input type

    Rails 3: jquery working to switch view with AJAX, how to get an focused state for the link?

    How to increase the height of footerrow in jqgrid

    How to apply Sticky Table header design on every ajax refresh which is every 30 seconds?

    How to make this layout more responsive in CSS?

    How to fix unable to load css file in maven build on maven springmvc project [closed]

    Polymer 1.x: How to use Polyfills to shim support for CSS variables

    iphone - How to implement the effect of “float” for image, just like in CSS style