Member Avatar for shruti sepra

hi, can any body tell me how to make horizontal dropdown menu using css.

  • 2 Contributors
  • 2 Replies
  • 71 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by shruti sepra

Dani AI

Generated

— a compact, practical pattern is below. is right that searches turn up many demos, but this gives a ready-to-run starting point that keeps keyboard users in mind and is easy to adapt.

<nav>
  <ul class="menu">
    <li><a href="#">Home</a></li>
    <li>
      <a href="#">Products</a>
      <ul class="submenu">
        <li><a href="#">Prod 1</a></li>
        <li><a href="#">Prod 2</a></li>
      </ul>
    </li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

<style>
.menu{list-style:none;margin:0;padding:0;display:flex}
.menu>li{position:relative}
.menu a{display:block;padding:10px 15px;text-decoration:none}
.submenu{position:absolute;top:100%;left:0;display:none;margin:0;padding:0;list-style:none}
.menu li:hover>.submenu,.menu li:focus-within>.submenu{display:block}
.submenu li a{padding:8px 12px;white-space:nowrap}
</style>

Notes: use :focus-within to expose submenus for keyboard users (see MDN :focus-within). On touch devices, hover is unreliable; add a small JS toggle that adds an open class and updates aria-expanded on the trigger for reliable tap behavior. Mark parent triggers with aria-haspopup="true" and, if you control the open/close with JS, toggle aria-expanded. For smooth animations prefer transitions on opacity/visibility rather than display. Test across keyboard navigation, screen readers, and mobile to catch overlap/z-index and focus-return issues.

Recommended Answers

All 2 Replies

Member Avatar for blocblue

Put those exact words into Google and I'm sure it will give you a lot of hits.

Member Avatar for shruti sepra

thanks robothy

Put those exact words into Google and I'm sure it will give you a lot of hits.

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.