Member Avatar for prasanna123

As we can see in this site when we place the cursor over the "webdevelopment" then it shows a drop ddown list of items what is the code used to make it working??can any one helip me plzz

  • 4 Contributors
  • 3 Replies
  • 101 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by shahbaz13

Dani AI

Generated

Short answer: make the menu semantic (a nested <ul>), show the child <ul> with CSS on hover/focus, and add a tiny bit of JS for touch and keyboard. — the replies from , and point in the right directions (CSS-first, plugins, jQuery). Below is a compact, modern pattern that keeps accessibility in mind and works on touch devices.

Example markup (semantic, minimal):

<nav class="menu" aria-label="Main">
  <ul>
    <li>
      <a href="#" aria-expanded="false">Web Development</a>
      <ul class="submenu" role="menu">
        <li role="none"><a role="menuitem" href="/html">HTML</a></li>
        <li role="none"><a role="menuitem" href="/css">CSS</a></li>
        <li role="none"><a role="menuitem" href="/js">JavaScript</a></li>
      </ul>
    </li>
  </ul>
</nav>

CSS to show on hover and when focused (handles keyboard Tab via :focus-within):

.menu ul { list-style:none; margin:0; padding:0; }
.menu > ul > li { position:relative; display:inline-block; }
.submenu { position:absolute; left:0; top:100%; display:none; min-width:160px; background:#fff; }
.menu li:hover > .submenu,
.menu li:focus-within > .submenu { display:block; }
.menu li.open > .submenu { display:block; } /* for JS toggle on touch */

Small JS for touch/click toggle and basic keyboard handling (sets aria-expanded, closes on Escape):

document.querySelectorAll('.menu > ul > li > a').forEach(function(trigger){
  trigger.addEventListener('click', function(e){
    var submenu = this.nextElementSibling;
    if (!submenu) return;
    e.preventDefault();
    var parent = this.parentNode;
    var open = parent.classList.toggle('open');
    this.setAttribute('aria-expanded', open ? 'true' : 'false');
  });
});

document.addEventListener('keydown', function(e){
  if (e.key === 'Escape') {
    document.querySelectorAll('.menu .open').forEach(function(openItem){
      openItem.classList.remove('open');
      var a = openItem.querySelector('a');
      if (a) a.setAttribute('aria-expanded','false');
    });
  }
});

Notes and troubleshooting:

  • Never rely on hover alone: touch devices need a click/toggle fallback.
  • For full keyboard/arrow navigation or complex behavior follow the WAI-ARIA menu patterns. See WAI-ARIA guidance and the CSS :focus-within reference for details: WAI-ARIA menubar pattern and MDN :focus-within.
  • If a submenu doesn't appear, check parent overflow, z-index, and that the parent is positioned (position:relative).

Recommended Answers

All 3 Replies

Member Avatar for Pjieter

As we can see in this site when we place the cursor over the "webdevelopment" then it shows a drop ddown list of items what is the code used to make it working??can any one helip me plzz

Maybe this can help you to get started?
http://www.cssnewbie.com/easy-css-dropdown-menus/

Member Avatar for lps

My suggestion is doing it using superfish. Try download both js and css way of doing it at this site:

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.