Member Avatar for btech

I want to make a option on my toolbar a "drop down" element. I want the user to be able to mouse over links and be able to select their link from a scroll out menu. below is my navbar. could someone please help.

<!-- Site navigation menu -->
<ul class="navbar">
<br><br>
<h2><b>Site Navigation</h2>
<hr width="70" align="center">
<center>
<li><a href="index.html">Home</a>
<li><a href="activities.html">Activities</a>
<li><a href="bulletin.html">Bulletin</a>
<li><a href="churchLeaders.html">Church Leaders</a>
<li><a href="contact.html">Contact Us</a>
<li><a href=" ">Links</a><br />
</ul></center>

  • 2 Contributors
  • 3 Replies
  • 237 Views
  • 14 Hours Discussion Span
  • Latest Post Latest Post by Dani

Dani AI

Generated

A few focused fixes and a minimal pattern to turn 's list into a reliable, accessible dropdown.

The main HTML problems visible in the original post are structural: a heading and presentation tags inside the <ul>, missing closing <li> tags, and use of the obsolete <center>. Move headings outside the list, keep the nav semantics (use a <nav> wrapper), and place dropdown items in a nested <ul> so screen readers and CSS can target them cleanly.

Example structure (keep headings outside the list and use a nested submenu):

<nav class="site-nav">
  <h2>Site Navigation</h2>
  <ul class="navbar">
    <li><a href="index.html">Home</a></li>
    <li class="has-sub" aria-haspopup="true">
      <a href="#">Links</a>
      <ul class="submenu" aria-label="Links submenu">
        <li><a href="link1.html">Link 1</a></li>
        <li><a href="link2.html">Link 2</a></li>
      </ul>
    </li>
    <li><a href="contact.html">Contact Us</a></li>
  </ul>
</nav>

CSS basics for hover + keyboard focus (keep layout simple; avoid relying on :hover only):

.navbar { list-style:none; margin:0; padding:0; }
.navbar li { position:relative; display:inline-block; }
.submenu { display:none; position:absolute; top:100%; left:0; }
.navbar li:hover .submenu,
.navbar li:focus-within .submenu { display:block; }

Touch and accessibility notes: add aria-expanded and toggle it when a submenu opens. On touch devices, intercept the parent link click to toggle an .open class instead of relying on hover. A tiny JS fallback toggles open and updates aria-expanded. Troubleshooting tips: ensure parent li is position:relative, check z-index so submenus sit above other content, and avoid overflow:hidden on ancestor containers that can clip the dropdown. As pointed out earlier, worked examples exist — the pattern above is a compact, accessible baseline that works across mouse, keyboard, and touch with a small enhancement script.

Recommended Answers

All 3 Replies

Member Avatar for btech

Thank you this was exactly what I was looking for

Member Avatar for Dani

No problem. Good luck :)

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.