Member Avatar for Alv45525

Hi,
i've been looking for a horizontal drop down menu making use of tables on the web.I found some with the menu horizontal, but making use of list and the drop down was vertical. I need both of them horizontal...Can any one help plz...

  • 3 Contributors
  • 4 Replies
  • 122 Views
  • 6 Days Discussion Span
  • Latest Post Latest Post by Dannyo329

Dani AI

Generated

The simplest, most future‑proof way to get both the main bar and its dropdown row to be horizontal is semantic HTML plus CSS (flex or inline-block). Avoid tables for layout and skip Flash — they break semantics, accessibility and mobile support. was right that the visible direction comes down to how you position the hidden menu; ’s Flash suggestion is obsolete now.

A minimal pattern that makes the top level a horizontal row and the submenu a horizontal row that appears under the parent:

<nav class="menu">
  <ul>
    <li>
      <a href="#">Products</a>
      <ul class="submenu">
        <li><a href="#">One</a></li>
        <li><a href="#">Two</a></li>
        <li><a href="#">Three</a></li>
      </ul>
    </li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

/* CSS */
.menu ul { list-style: none; margin: 0; padding: 0; }
.menu > ul { display: flex; gap: 10px; }
.menu li { position: relative; }
.menu li > .submenu {
  position: absolute; left: 0; top: 100%;
  display: flex; gap: 8px; white-space: nowrap;
  visibility: hidden; opacity: 0;
  transform: translateY(-6px);
  transition: opacity .12s, transform .12s;
}
.menu li:hover > .submenu,
.menu li:focus-within > .submenu {
  visibility: visible; opacity: 1; transform: translateY(0);
}
.menu .submenu li { display: inline-block; }

Notes and troubleshooting:

  • To make the submenu go to the right instead of below set left:100%; top:0;.
  • If the submenu doesn’t appear check for overflow:hidden on ancestor elements, set a z-index, and ensure the parent li is position:relative.
  • For keyboard users use real links (they receive focus) and the :focus-within rule; for touch add a small JS click-toggle that sets an open class and updates aria-expanded.
  • Keep the hit area big on mobile and consider switching to a stacked/hamburger pattern at narrow widths.

This approach gives horizontal flows on both levels, degrades gracefully, and keeps the markup accessible and easy to style.

Recommended Answers

All 4 Replies

Member Avatar for blocblue

Hi,

Sorry but to clarify, are you talking about wanting a menu that expands to the side, as opposed to dropping down underneath?

If so, they both work on the same principle. However the key difference is in the relative positioning of the hidden menu.

A good example can be found here:
http://www.cssplay.co.uk/menus/flyout_4level.html
Even if you don't use the example exactly as is, it would serve as a good basis on which to begin building your own.

R.

Member Avatar for Alv45525

NO the thing is that i nedd both layers of the drop down menu to be horizontal

Member Avatar for blocblue

NO the thing is that i nedd both layers of the drop down menu to be horizontal

Thx for the NO there. Do you mean that you'd like the initial menu in a column formation as opposed to a row? With the sub-menu appearing in a new column adjacent to it? Hence, expanding horizontally?

If that is the case, you'd just use an unordered list <ul> and make list-style-type none. Add borders, padding and margins to each <li> and then the submenu in the form as seen via the link I posted above.

R

Member Avatar for Dannyo329

Use Marcomedia Flash Professional 8 or in mx, is best for making any sort of menus. Although I don't use Flash That much, I have been told its good and easy to use. Or use just Marcomedia Flash 8, the Professional is harder to use, and more complicated. Or go on http://cssmenumaker.com/
Its got all these menus to choose from.
Or make your own menus with:
.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.