Member Avatar for HunainHafeez 
<div>
     <div style="position:fixed">
      <ul>
       <li><a href="#home">Home</a></li>
       <li><a href="#news">Profile</a></li>
       <li><a href="adminViewEmployers.aspx">Employers</a></li>
       <li><a href="adminViewApplicants.aspx">Applicants</a></li>
       <li><a href="#about">Super Admins</a></li>
     </ul>
    </div>

designed a vertical menu in css , it has 4 clickable links

HOME
APPLICANTS
EMPLOYERS
PROFILE

Now i want that when i click on APPLCIANTS then within this menu it should open 2 more clickable links like this:>

HOME

APPLICANTS

Active Applicants

Inactive Applicants

EMPLOYERS

PROFILE

  • 3 Contributors
  • 2 Replies
  • 105 Views
  • 6 Hours Discussion Span
  • Latest Post Latest Post by simplypixie

Dani AI

Generated

Nested submenus are the right direction — thanks to for pointing that out and to for offering a sample — but a few practical items will keep the pattern robust across devices and accessible to keyboard users.

Use a click/toggle approach (not hover-only) so it works on touch. Make the toggle an actual control (a <button> or an anchor with role="button") and keep the submenu in the markup so it still works without JavaScript. When toggling, update aria-expanded and add/remove an open class so CSS can show/hide the submenu. Example JavaScript to toggle state and the attribute:

document.querySelectorAll('.vertical-menu .has-sub > a').forEach(function(toggle){
  toggle.addEventListener('click', function(e){
    e.preventDefault();
    var li = this.parentElement;
    var isOpen = li.classList.toggle('open');
    this.setAttribute('aria-expanded', isOpen);
  });
});

Common problems and fixes: if the submenu appears behind other content, check z-index/stacking contexts and ancestors with transform or filter (those can create new stacking contexts that affect fixed/absolute children). Also ensure no ancestor uses overflow:hidden that will clip the submenu. See MDN for details about positioning and stacking contexts: position on MDN.

Accessibility and keyboard behavior matter: support Enter/Space to open, Esc to close, and move focus into the submenu when it opens. Follow the WAI-ARIA Authoring Practices examples for menu/menu-button patterns for concrete keyboard mappings and ARIA usage: WAI-ARIA Authoring Practices.

Recommended Answers

All 2 Replies

Member Avatar for JorgeM

I may have a sample. Will ck when I get back to the office.

Member Avatar for simplypixie

Change your Applications LI to this (and add a class to your parent ul):

<ul class="vertical-menu">
.
.
<li><a href="#">Applicants</a>
    <ul class="submenu">
      <li><a href="active-applicants.aspx">Active Applicants</a></li>
      <li><a href="inactive-applicants.aspx">Inactive Applicants</a></li>
    </ul>
</li>
.
.
</ul>

And in your CSS (please change or add any additional required styling, this is the bare bones to show the sub-menu out to the right of the main menu)

ul.submenu {
    position: absolute;
    left: -999px;
    margin-left: 160px; /* This should be the same as the width of your main menu */
    z-index: 1000;
}
.vertical-menu li:hover ul.submenu {
    left: auto;
}
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.