Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    9
    Thanks
    4
    Thanked 0 Times in 0 Posts

    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.
    Attached Images Attached Images  
    Attached Files Attached Files

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    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?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    9
    Thanks
    4
    Thanked 0 Times in 0 Posts
    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).
    Attached Files Attached Files

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    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
    Code:
    #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!
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    neil_f (08-02-2010)

  • #5
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    9
    Thanks
    4
    Thanked 0 Times in 0 Posts
    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?

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Which is your browser? I don't see any such issue.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    neil_f (08-02-2010)

  • #7
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    9
    Thanks
    4
    Thanked 0 Times in 0 Posts
    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.
    Attached Files Attached Files

  • #8
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Set display:block; to #menu ul li a
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    neil_f (08-02-2010)

  • #9
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    9
    Thanks
    4
    Thanked 0 Times in 0 Posts
    abduraooft - excellent, many thanks for your help.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •