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
  • 105 Views
  • 14 Hours Discussion Span
  • Latest Post Latest Post by dennishall
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.