Member Avatar for debasishgang7

Hii all...

i wanna design a menu like that

when a user bring mouse cursor on some topic the sub menu items will be shown as hyper link like windows start menu.So with the help of HTML how can i do it..???
EX.

Course Offered--->Civil
Mechanical
Electrical
Info Tech.

When a user bring mouse cursor on "Course Offered" the Sub menu items will open as hyper link then the user should be able to click on sub menu hyper link(EX civil,mech,electrical etc,...)


Thanks..

  • 2 Contributors
  • 2 Replies
  • 61 Views
  • 14 Hours Discussion Span
  • Latest Post Latest Post by debasishgang7

Dani AI

Generated

A simple, robust pattern for the "Course Offered" menu that matches 's intent is semantic markup (nav > ul > li) with a nested ul for the submenu. pointed to the classic CSS-hover approach (Suckerfish); that still works for desktop, but combine it with :focus-within and a small JS toggle so keyboard and touch users can open the submenu reliably. Keep submenu items as real links so they stay crawlable and keyboard-focusable.

Example HTML (use a button when the parent does not navigate):

<nav class="menu" role="navigation">
  <ul>
    <li>
      <button class="menu-toggle" aria-expanded="false" aria-controls="courses">Course Offered</button>
      <ul id="courses" class="submenu">
        <li><a href="/course/civil">Civil</a></li>
        <li><a href="/course/mechanical">Mechanical</a></li>
        <li><a href="/course/electrical">Electrical</a></li>
        <li><a href="/course/it">Info Tech</a></li>
      </ul>
    </li>
  </ul>
</nav>

Compact CSS and minimal JS to cover hover, keyboard focus, and touch toggle:

.menu ul { list-style: none; margin: 0; padding: 0; }
.menu .submenu { display: none; position: absolute; }
.menu li:hover > .submenu,
.menu li:focus-within > .submenu,
.menu .menu-toggle[aria-expanded="true"] + .submenu { display: block; }
document.querySelectorAll('.menu-toggle').forEach(function(btn) {
  btn.addEventListener('click', function() {
    var open = btn.getAttribute('aria-expanded') === 'true';
    btn.setAttribute('aria-expanded', String(!open));
  });
});

Notes and troubleshooting: use aria-controls and aria-expanded on the toggle, test with keyboard (Tab and Shift+Tab) to ensure the submenu stays open via :focus-within, and add an Escape handler and "click outside" close handler for polish. If the parent must also be a navigation link, provide a separate small toggle control so clicking the link still navigates. For ARIA/keyboard patterns and behavior details see the WAI-ARIA menu-button example (WAI-ARIA menu button example) and the MDN docs on :focus-within and :hover (MDN :focus-within, MDN :hover).

Recommended Answers

All 2 Replies

Member Avatar for teedoff

Here is a good walkthrough for CSS based single, two level, and three level menus.

Hope that helps.

Member Avatar for debasishgang7

thanks..

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.