Menu Problem Pt2

Hi

I am having some problems with an icon that is displayed when a menu is hovered over.

Please see attached files for the html (renamed to .txt), CSS (I’ve copied all into a single file due to the 4x attachment limit) and jpg for the icon that is displayed when hovering over a menu item.

Hovering the mouse over any menu item causes an icon to be displayed to the left of the menu item.

When menu item ‘Main 1’ is selected a sub-menu is displayed. The problem is that when any item in the sub-menu is hovered over the icon is displayed for both the parent (Main1) and sub menu items – I only want it displayed for the sub item being hovered over. Is there anyway I can prevent the icon for the Main1 parent menu being displayed. The fix though has to be such that if Main2, Main3, Main4 or Main5 are hovered over (which don’t have sub-menu’s) then the icon is displayed for them.

Note: I have previously tried the table approach for the menu, which although fixed the icon problem brought other problems. Through this site I was advised that the solution should use the list approach (rather than table).

Many thanks in advance for any help.

I am having some problems with an icon that is displayed when a menu is hovered over.
Can we have a link to your page?

Don't have page on internet yet, so cannot provide link. Having just seen that .zip files can be attached, I have a zip that contains all the files (HTML, CSS and jpg).

When menu item ‘Main 1’ is selected a sub-menu is displayed. The problem is that when any item in the sub-menu is hovered over the icon is displayed for both the parent (Main1) and sub menu items – I only want it displayed for the sub item being hovered over. The sub-menu is nested inside the main <li> and when you hover the sub-menu items, the same happens for the main list item.

A solution would be to apply the background image to the anchor instead of list-item, like #menu ul li a{padding-left:2em;}
#menu ul li a:hover {background: url(Menu.jpg) no-repeat left; }

PS: Now, the hover effect will work even in IE6!

abduraooft - many thanks for that, I now get the icon only displayed for submenu when cusor hovers over.

One side effect is that when the mouse hovers over a menu item it causes the icon to be displayed at the position of the first character and shifts the menu item text to the right. Is there anyway I can get the icon to appear to the left of the text, i.e. the icon appears to left but text stays where it is?

Which is your browser? I don't see any such issue.

I managed to fix that problem.

I had:
#menu ul li a{background: url(Menu.jpg) no-repeat; padding-left:2em;}

rather than as per the update on this page:
#menu ul li a{padding-left:2em;}

I have now moved the background piece to the line:
a:hover {color: black; text-decoration:none; background: url(Images/Menu.jpg) no-repeat;}

and its now working better.

Next problem if menu text wraps around ...

The menu has a width of 130px. If one of the menu items has text wider than this it wraps around and the display then shows the wrapped around text starting under the icon, rather than under the first letter of the first line (hope that makes sense). Is there anyway I can get the text when wrapped around to align with each other but the icon to be displayed to the left of the text?

I have attached updated Common.css and AboutUs.txt (html renamed) files to replace those previously which hopefully show the problem.

Set display:block; to #menu ul li a

abduraooft - excellent, many thanks for your help.