When I move the cursor to the menu header the images displayed incorrectely. I have tried display:inherit; for the image tag.
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Untitled Page</title>
<style type="text/css" media="screen">
/**************** menu coding *****************/
#menu
{
background: #eee;
float: left;
width: 100%;
}
#menu ul
{
float: left;
list-style: none;
margin: 0;
padding: 0;
width: 12em;
}
/*Font and border style for the Menu Item*/
#menu a, #menu h2
{
border-color: #ccc #888 #555 #bbb;
border-style: solid;
border-width: 1px;
display: block;
font: bold 11px/16px arial, helvetica, sans-serif;
margin: 0;
padding: 2px 3px;
}
/* Background Image that comes for the Menu headers*/
#menu h2
{
background-image: url('MenuImages/MenuItemBackground.gif');
background-repeat: repeat-x;
color: #0000FF;
position: relative;
text-transform: uppercase;
z-index: -1;
}
/*Background Image for the MenuItems */
#menu a
{
background-image: url('MenuImages/MenuItemBackground.gif');
background-repeat: repeat-x;
color: #000;
text-decoration: none;
}
/*Background Image for the MenuItems While Hover*/
#menu a:hover
{
background-image: url('MenuImages/MenuItemSelected.jpg');
background-repeat: repeat-x;
color: #a00;
}
/*To make the Menu headers visible */
#menu li
{
position: relative;
/*height: 22px;*/
}
/* Background Image that comes for the Menu headers to come only for the Menu Headers*/
#menu ul ul
{
position: absolute;
z-index: 500;
}
/* To make the sub menu items to come next to the parent menu items*/
#menu ul ul ul
{
/*left: 100%;
position: absolute;
top: 0;*/
margin-top: -17px;
left: 95%;
position: absolute;
}
/*Don't display the menuItem if not needed*/
div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul
{
display: none;
}
/*Display the menuItem(UL) if hover on the parent MenuItem*/
div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{
display: block;
}
</style>
<!--[if IE]>
<style type="text/css" media="screen">
#menu ul li
{
float: left;
width: 100%;
}
</style>
<![endif]-->
<!--[if lt IE 7]>
<style type="text/css" media="screen">
body
{
behavior: url(csshover.htc);
font-size: 100%;
}
#menu ul li a
{
height: 1%;
}
#menu a, #menu h2
{
font: bold 0.7em/1.4em arial, helvetica, sans-serif;
}
</style>
<![endif]-->
</head>
<body>
<form id="form1" runat="server">
<div id="menu">
<ul>
<li id="1">
<h2>
CSS Drop Down Menus</h2>
</li>
</ul>
<ul>
<li id="2">
<h2>
Vertical CSS Pop-Out Menu</h2>
<ul>
<li id="3"><a href="#" title="SEO Consultants Directory">CSS Hover Navigation</a></li>
<li id="5"><a href="#" title="SEO Consultants Vertical Example">SEO Consultants Sample</a>
<ul>
<li id="6"><a href="#" title="Complete Example">Tanfa Demo example</a>
<ul>
<li id="7">
<img src="http://www.mycssmenu.com/1.gif" alt="" style="float: left; margin-top: -1px;
height: 23px; width: 24px; display:block;" />
<a href="#" title="Vertical Menu - Page 1">Stage 1</a><img src="MenuImages/indicator-darkblue.gif"
alt="" style="float: right; margin-top: -18px; height: 12px; width: 11px; display:run-in;" />
</li>
<li id="8"><a href="#" title="Vertical Menu - Page 2">Stage 2</a></li>
<li id="9"><a href="#" title="Vertical Menu - Page 3">Stage 3</a></li>
<li id="10"><a href="#" title="Vertical Menu - Page 4">Stage 4</a></li>
<li id="11"><a href="#" title="Vertical Menu - Page 5">Stage 5</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<ul>
<li id="4">
<h2>
Horizontal Drop & Pop Menu</h2>
</li>
</ul>
</div>
</form>
</body>
</html>
