Using just CSS (and JS to apply :hover styles), what's the best way to build horizontal dropdown nested menus?

I'm trying to adopt the menus here, but I can't achieve the positioning I want. Every time I attempt this, I wind up with so much CSS cludge that it's no longer manageable.

DOM:

<nav>
  <ul>
    <li>
      <a href="#">Heading 1</a>
      <ul>
         <li><a href="#">1</a>
               <ul><li>a</li><li>b</li></ul>
         </li>
         <li>2</li><li>3</li>
      </ul>
    </li>
    <li>
      <a href="#">Heading 2</a>
        <ul><li>1</li><li>2</li><li>3</li></ul>
    </li>
</nav>

Desired output:

alt text

That is, the top header is entirely horizontal, the first menu beneath lines up horizontally on the left, and all further submenus line up horizontally on the right and vertically on the top. How would I go about building this basic idea?

1 answer

0
points

If the horizontal list is giving you trouble, you may need to add some more css properties to the li elements:

display: inline;    
list-style: none;
float: left;

You may also need white-space: nowrap; in your ul element.

Answered almost 6 years ago by David Clarke