Member Avatar for sunny124

Hello,

My dropdown menu is not working properly. I have set the menu to not display through css.
When I hover my mouse on the 'Link Menu' <h2>, it only shows the menu while the mouse is hovering the 'Link Menu' <h2>.

As soon as I move my mouse to the links that are being displayed, the menu disappears again. This happens from 2nd link downwards.

Below is the html code for the menu.

<div id="menu">
 <ul>
  <li>
    <h2>Link Menu</h2>
     <ul class="sub_menu">
       <li><a href="#details" title="Find out my details">My Personal Details</a></li>
       <li><a href="#hometown_descrip" title="Find out about my home town">My Home           Town</a></li>
       <li><a href="#achievement" title="Find out about my acheivements">My Achievement</a></li>
	<li><a href="#fav_books_movs_mus">Books, movies, and music</a></li>
	<li><a href="#swinburne_timetable">Swinburne Timetable</a></li>
	<li><a href="#search_swinburne">Search Swinburne</a></li>
     </ul>
  </li>
 </ul>
</div>

Below is the css for the dropdown menu.

#menu a{
	text-decoration: none;
}
#menu ul:hover .sub_menu{
	display: block;

}
#menu ul{
	list-style: none;
}
#menu ul ul{
	list-style: none;
	padding: 0;
	margin: -20px 0 0 0;
	display: none;
}
#menu li{
	height: 25px;
	width: 170px;
}

What am I doing wrong?

Please help, thanks.

Edited by sunny124 because: n/a
  • 2 Contributors
  • 1 Reply
  • 116 Views
  • 14 Hours Discussion Span
  • Latest Post Latest Post by dennishall

Dani AI

Generated

— the symptom you describe (menu shows only while hovering the header and then disappears as you move into the links) usually comes from two things: the hover rule is attached to the wrong element, and there’s a small gap created by default margins/explicit heights so the browser thinks the pointer left the trigger. correctly reproduced your file, which shows the markup itself is fine — the fix is in the CSS.

A small, safe change is to make the parent LI control the submenu visibility and remove default h2 spacing. Example (minimal change):

#menu li:hover > .sub_menu {
  display: block;
}

#menu h2 {
  margin: 0;
  cursor: pointer;
}

For a more robust layout (prevents accidental gaps and stacking issues) put the submenu out of the normal flow with absolute positioning and avoid fixed height on list items:

#menu li {
  position: relative;
}

#menu li > .sub_menu {
  position: absolute;
  top: 100%;
  left: 0;
  display: none;
  z-index: 1000;
}

Troubleshooting checklist: (1) remove any fixed height on li while testing — that often clips items; (2) temporarily add visible outlines/backgrounds to the li and submenu to spot gaps; (3) check CSS order/specificity (your hover rule must not be overridden); (4) test in dev tools by forcing :hover on the parent li to see if styles apply. Note: :hover-only menus won’t work well on touch devices — add a click/tap fallback if mobile support is needed.

Member Avatar for dennishall

I have copied your code and placed it into a single html file (css in the head) and it works fine.

When I hover over Link Menu, the LIs display, I can then hover over any of the 6 LIs and they remain displayed and selectable.

Here is the working file (having no changes to your setup except to move the css into the html document:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
#menu a{
	text-decoration: none;
}
#menu ul:hover .sub_menu{
	display: block;

}
#menu ul{
	list-style: none;
}
#menu ul ul{
	list-style: none;
	padding: 0;
	margin: -20px 0 0 0;
	display: none;
}
#menu li{
	height: 25px;
	width: 170px;
}
</style>
</head>

<body>
<div id="menu">
 <ul>
  <li>
    <h2>Link Menu</h2>
     <ul class="sub_menu">
       <li><a href="#details" title="Find out my details">My Personal Details</a></li>
       <li><a href="#hometown_descrip" title="Find out about my home town">My Home Town</a></li>
       <li><a href="#achievement" title="Find out about my acheivements">My Achievement</a></li>
	<li><a href="#fav_books_movs_mus">Books, movies, and music</a></li>
	<li><a href="#swinburne_timetable">Swinburne Timetable</a></li>
	<li><a href="#search_swinburne">Search Swinburne</a></li>
     </ul>
  </li>
 </ul>
</div>
</body>
</html>
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.