Member Avatar for radhika tyagi

i am making a .net website and willing that the menu items should appear in the bottom of a button when mouse is placed on the button. what to do?
:'(

  • 2 Contributors
  • 2 Replies
  • 107 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by radhika tyagi

Dani AI

Generated

wanted menu items to appear beneath a button when the mouse is over it. steered the thread toward mouse/hover behavior; here is a clear, practical approach that keeps things simple and accessible.

Keep the button and the list inside a relatively positioned wrapper, then reveal the submenu with CSS so no server round-trips are needed. Minimal example:

<div class="menu">
  <button class="btn">Menu</button>
  <ul class="submenu">
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
  </ul>
</div>
.menu { position: relative; display: inline-block; }
.submenu {
  position: absolute;
  top: 100%;
  left: 0;
  display: none;
  margin: 0;
  padding: 0;
  list-style: none;
}
.menu:hover .submenu,
.menu:focus-within .submenu { display: block; }

Notes and troubleshooting:

  • For ASP.NET server controls, wrap the control in the wrapper div (or give the control a CssClass) so the rendered HTML can be targeted by CSS. In ASP.NET 4+, use ClientIDMode="Static" if you need predictable IDs for scripting.
  • On touch devices, hover doesn't behave reliably. Add a small script to toggle a class on click (or use a framework's dropdown component) so taps open the menu.
  • Accessibility: include keyboard support via :focus-within, and if using JS toggle aria-expanded and proper roles so screen readers understand the control.
  • If the menu is not visible, check parent elements for overflow:hidden that might clip the submenu, and ensure z-index and stacking context allow the submenu to float above other content.

If using Bootstrap, its built-in dropdowns handle many of these concerns; a small extra script is needed only if you want hover-to-open behavior.

Recommended Answers

All 2 Replies

Member Avatar for MichaelWClark

rephrase this question and you may get a better answer:

google onMouseOver , Hover

button1.visible= "true"

Member Avatar for radhika tyagi

ok .............thanku so much for ur answer.

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.