Member Avatar for avinash_545

Dear all,
I am currently working on an html project and I wanted to include a vertical navigation menu to the index.html page( the homepage).Am using table and drawing row to do it.

I want to add a little extra to it. that is on mouseover on one item in the list of menus, another sublist opens up, that is next to that element we have another sub-table(another vertical navigation menu) that opens up.

I don't have any idea how to do it.
Please help.

  • 3 Contributors
  • 3 Replies
  • 86 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by avinash_545

Dani AI

Generated

The OP wanted a vertical menu whose submenu opens next to an item. was right to steer away from table layout, and 's pointer to ready-made CSS menus is useful if you prefer a drop-in solution. A simple, reliable approach is semantic HTML (nav + ul/li), nested <ul> for submenus, and CSS to absolutely position the submenu so it appears beside the hovered item. This keeps markup accessible and responsive.

A minimal pattern (skeleton only — add classes/links as needed):

<nav>
  <ul class="menu">
    <li><a href="#">Item 1</a>
      <ul class="submenu">
        <li><a href="#">Sub A</a></li>
        <li><a href="#">Sub B</a></li>
      </ul>
    </li>
    <li><a href="#">Item 2</a></li>
  </ul>
</nav>

.menu li { position: relative; }
.menu .submenu { display: none; position: absolute; left: 100%; top: 0; }
.menu li:hover > .submenu,
.menu li:focus-within > .submenu { display: block; }

Notes and quick fixes: use anchors inside the li so keyboard users can tab into items; add :focus-within (or JS toggles with aria-expanded) for keyboard support; on touch devices convert hover to click/tap that toggles an open class. If a submenu is clipped, check ancestor overflow and z-index. For full accessibility patterns and keyboard handling see the WAI-ARIA examples and the HTML <nav> guidance on MDN: WAI-ARIA authoring practices (menu examples) and MDN: <nav> element.

Recommended Answers

All 3 Replies

Member Avatar for drjohn

Tables for layout are a bad idea. Do try to learn about divs.

Google on son of suckerfish to learn how most people make menus with sub-menus. It's very simple to use.

Member Avatar for avinash_545

thanks to all.
I've finally got a light on it!!!

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.