2x Icon on Menu Hover Problems

[neil_f]

I am new to HTML and CSS and am currently having 2 problems with an icon that is displayed when the mouse hovers over a menu item.

Problem 1
I want the icon to appear to the left of the menu item, but can only get it to display on top of the first letter if the menu item (not say 5px to the left of).

Problem 2
When the mouse hovers over one of the submenu items the icon appears for both the submenu item and its parent - I only want it to display for the submenu item.

Code extracts below. Any help much appreciated.

HTML

<div id="menu">
<ul>
<li id="menu_1">
<a href="Aboutus.html">About Us
<ul id="about_sub">
<li><a href="Who.html">Who We Are</a></li>
<li><a href="What.html">What We Do</a></li>
</ul>
</a>
</li>

<li id="menu_2">
<a href="Services.html">Services
<ul id="services_sub">
<li><a href="Service1.html">Service 1</a></li>
<li><a href="Service2.html">Service 2</a></li>
<li><a href="Service2.html">Service 3</a></li>
</ul>
</a>
</li>

<li id="menu_3">
<a href="Contact.html">Contact Us</a>
</li>
</ul>
</div>

CSS

#menu ul {
position: absolute;
list-style: none;
top:150px;
left: 25px;
width: 120px;
padding: 0px;
margin: 0px;
text-align: left;
font-size: 12px;
font-weight: bold;
}

#menu li {
margin-top: 5px;
}

#menu ul li:hover {
background: url(Images/Menu.bmp) no-repeat;
}

#menu li ul {
position: relative;
top: 0px;
left: 5px;
margin-top: 0px;
font-size: 11px;
font-weight: bold;
}

[drjohn]

Give the li a href of the menu some padding (equal to the width of the icon) to push it in a bit from where the icon will appear.

[Lusiphur]

An alternate method would be to do it this way:

#MenuDiv {
	position: absolute;
	top:150px;
	left: 25px;
	width: 120px;
}

#MenuTable {
	table-layout: width: 120px, padding: 0px, margin: 0px;
}

.menuTopRow {
	text-indent: 20px;
	font-size: 12px;
	font-weight: bold;
}
.menuTopRow:hover {
	background: url(test.png) no-repeat;
}
.menuSubRow {
	text-indent: 20px;
	padding-left: 5px;
	font-size: 11px;
	font-weight: bold;
}
.menuSubRow:hover {
	background: url(test.png) no-repeat;
	background-position: 5px;
}

Then the following in the HTML:

<div id="MenuDiv">
<table id="MenuTable">
  <tr>
    <td class="menuTopRow"><a href="Aboutus.html">About Us</a></td>
  </tr>
  <tr>
    <td class="menuSubRow"><a href="Who.html">Who We Are</a></td>
  </tr>
  <tr>
    <td class="menuSubRow"><a href="What.html">What We Do</a></td>
  </tr>
  <tr>
    <td class="menuTopRow"><a href="Services.html">Services</a></td>
  </tr>
  <tr>
    <td class="menuSubRow"><a href="Service1.html">Service 1</a></td>
  </tr>
  <tr>
    <td class="menuSubRow"><a href="Service2.html">Service 2</a></td>
  </tr>
  <tr>
    <td class="menuSubRow"><a href="Service3.html">Service 3</a></td>
  </tr>
  <tr>
    <td class="menuTopRow"><a href="Contact.html">Contact Us</a></td>
  </tr>
</table>
</div>

In my example I pushed the text-indent by 20px because the image I was using was 20x20px in size for the hover.

With this method, as the background is being called on specific cell hovers instead of generally between both list and sublist hovers it only triggers the image over the selected line and not the line plus it's parent.

Mark as solved if this fixes your issue :)