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 4 of 4
  1. #1
    Regular Coder
    Join Date
    Aug 2005
    Posts
    365
    Thanks
    7
    Thanked 1 Time in 1 Post

    Question CSS List Menu - Menu parent item does not remain active

    Hi Experts,

    I am using a simple CSS List Menu & facing a very little problem.

    Please have a look at the menu here. The sub menu appears fine but when I move my mouse over the sub menu items, the parent menu item does not remain active. It should show the hover state when sub menu is appeared & user is moving his mouse over the sub menu items.

    Sorry for my poor English

    Waiting for a quick response...

  • #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
    Code:
    .topMenu ul li a:hover {styles.css (line 80)
    background:transparent url(images/topMenu_bg.gif) repeat-x scroll 0;
    }
    You'd need to apply the hover effect on the list items rather than on anchor. And you may need to add some javascript fix for IE6.
    Last edited by abduraooft; 11-03-2009 at 07:57 AM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello Uzair,
    I can't seem to get it to work.
    I did move some padding off the li and onto the a so the link and the dropdown button are the same size. Like this:
    Code:
    }
    .topMenu ul li ul li {
    	display: block;
    	font-size: 13px;
    	border-bottom: 1px solid #000;
    	color: #fff;
    	background-color: #182841;
    }
    .topMenu ul li ul li a {
    	display: block;
    	width: 206px;
    	color: #fff;
    	padding: 6px 4px 6px 10px;
    	text-decoration: none;
    	font-weight: normal;
    }

    Still looking at the other problem... It doesn't seem to work very well at all in FireFox.

    It is missing a closing tag for #wrapper
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #4
    Regular Coder
    Join Date
    Aug 2005
    Posts
    365
    Thanks
    7
    Thanked 1 Time in 1 Post
    Thank you, it worked.

    Now just for my knowledge... what "scroll 0" does?


  •  

    Posting Permissions

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