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 3 of 3
  1. #1
    New Coder
    Join Date
    Jul 2010
    Posts
    44
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Keeping parent item hovered while hovering child items on drop down menu

    Hi, I have a drop down menu that's given like this:

    Html:
    Code:
     <ul id="navbar">
        		<li><a href="profile.php"><img src="images/profile3.jpg" onmouseover="this.src='images/profilehover3.jpg'" onmouseout="this.src='images/profile3.jpg'" </a><ul>
            		<li><a href="#">Edit Profile</a></li>
    				<li><a href="#">Change Picture</a></li>
    				<li><a href="#">Something else</a></li></ul>
            	</li>
            </ul>
    Css:
    Code:
    #navbar {
    	margin: 0;
    	padding: 0;
    	height: 0em; }
    #navbar li {
    	list-style: none;
    	float:left; }
    #navbar li1 {
    	list-style: none;
    	float:right; }	
    #navbar li a {
    	display: block;
    	padding: 0px 0px;
    	background-color: #5e8ce9;
    	color: #fff;
    	text-decoration: none;}
    	
    #navbar li ul {
    	display:none;
    	width: 10em; /* Width to help Opera out */
    	background-color: limegreen;}
    #navbar li:hover ul {
    	display: block;
    	position:absolute;
    	margin: 0;
    	padding: 0; }
    #navbar li:hover li {
    	float: none; }
    #navbar li:hover li a {
    	background-color: limegreen;
    	border-bottom: 1px solid #fff;
    	color: #000; }
    #navbar li li a:hover {
    	background-color: #1fb0f3; }
    I get the drop down to work just fine, and the profile button to hover when my mouse is over it. However, I would like the profile button to stay hovered as long as my mouse is going through the items in the drop down menu.

    Is this possible?

    Thank you in advance!

  • #2
    Senior Coder
    Join Date
    Sep 2010
    Posts
    2,003
    Thanks
    15
    Thanked 236 Times in 236 Posts
    With the language being used it doesn't look like you can. The 'hover' event for the profile button is really a javascript onmouseover and onmouseout and is only attached to the image itself, you would need to add quite a bit more code and change quite a few things to make it work the way you want. I do notice that your image tag is missing the end > , but I don't think that will make it work differently?

  • #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
    I don't understand... this is not a bot doing this but a real person. Someone had to take the time to register on this forum and this is the crapp reason?

    jhjkhjh, do you think that I, or anyone, is going to run over to www.powerwhateverthe**** and spend some money? Really?

    Asshole.
    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


  •  

    Posting Permissions

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