SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict
    Join Date
    Aug 2010
    Posts
    349
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Weird Nav problem...

    When I hover over "About" and then hover over "Key Personnel" in the submenu, it widens the hover state of "About". Really strange...

    http://badesdesign.com/dev_msf/index.php
    login to dev:
    user: msf
    pass:4321

    HTML Code:
    	<nav> 
    		<ul class="mainNav">
    			<li class="home"><a href="index.php">HOME</a></li> 
    			<li class="loan-production"><a href="loan-production.php">LOAN PRODUCTION</a></li>
    	        <li class="recent-financings"><a href="recent-financings.php">RECENT FINANCINGS</a></li> 
    	        <li class="about"><a href="about.php">ABOUT</a>
    	        	<ul class="subMenu">
    	        		<li class="key-personnel"><a href="key-personnel.php">Key Personnel</a></li>
    	        	</ul>
    	        
    	        </li>
    	        <li class="contact"><a href="contact.php">CONTACT</a></li>
    
    <!-- END OF mainMenu --></ul>

    Code:
    /* NAVIGATION */
    
    .mainNav{
    	z-index: 1;
    	position: relative;
    	background: #252469;
    	float: left;
    	height: 40px;
    	width: 719px;
    	text-align: center;
    }
    
    .mainNav li{
    padding-top: 1px;
    	float: left;
    	position: relative;
    	vertical-align: middle;
    	line-height: 40px;
    	font-size: 10pt;
    	margin: 0 10px 0 10px;
    }
    	.mainNav li, .mainNav li a{
    		display: block;
    		height: 40px;
    		position: relative;
    		color: white;
    	}
    	
    		.mainNav li a:hover, .homeBody .mainNav li.home a, .aboutBody .mainNav li.about a, .contactBody .mainNav li.contact a{
    			position: absolute;
    			top:-1px;
    			left:0px;
    			background-image: url('/dev_msf/images/hovers.png');
    			height: 45px;
    			color: #252469;
    			padding-top: 3px;	
    		}
    		
    		.financeBody .mainNav li.recent-financings a {
    			width: 173px;
    			position: absolute;
    			top:-1px;
    			left:0px;
    			background-image: url('/dev_msf/images/hovers.png');
    			height: 45px;
    			color: #252469;
    			padding-top: 3px;
    			background-position: -246px 0px;	
    		}
    		.loanBody .mainNav li.loan-production a {
    			width:161px;
    			position: absolute;
    			top:-1px;
    			left:0px;
    			background-image: url('/dev_msf/images/hovers.png');
    			height: 45px;
    			color: #252469;
    			padding-top: 3px;
    			background-position: -85px 0px;
    		}
    		
    			.contactBody .mainNav li.contact a {
    			width:98px;
    			position: absolute;
    			top:-1px;
    			left:0px;
    			background-image: url('/dev_msf/images/hovers.png');
    			height: 45px;
    			color: #252469;
    			padding-top: 3px;
    			background-position: -500px 0px;
    			}
    
    li.home a:hover{
    	width:85px ;
    	background-position: 0 0px;
    }
    	
    li.home, li.home a{width: 85px;}
    
    li.loan-production, li.loan-production a{
    	width:161px ;
    }
    	li.loan-production a:hover{
    		width:161px;
    		background-position: -85px 0px;
    	}
    
    li.recent-financings, li.recent-financings a{
    	width: 173px;
    }
    
    	li.recent-financings a:hover{
    		width: 173px;
    		background-position: -246px 0px;	
    	}
    
    li.about, li.about a{
    	width:81px ;
    }
    
    	li.about a:hover{
    		width:81px ;
    		background-position: -419px 0px;	
    	}
    
    li.contact, li.contact a{
    	width: 98px;
    }
    
    	li.contact a:hover{
    		width: 98px;
    		background-position: -500px 0px;	
    	}
    	
    
    #underBar{
    	margin: 0 auto;
    	width: 1000px;
    	margin-bottom: 7px;
    
    }
    
    	.social{
    		padding-left: 15px;
    	}
    
    	.social li{
    		float: left;
    		margin: 8px 5px 0 5px; 
    		font-size: 10pt;
    		color: #6e6f71;
    	}
    
    	.social li:first-child{
    		margin: 15px 10px 0 10px; 
    	}
    	
    	#underBar p{
    		margin: 10px 200px 0 0;
    		float: right;
    		font-size: 11pt;
    		font-style: italic;
    		color: #252469;
    		font-weight: 100;
    	}
    
    /******** SUB MENU ************/
    .mainNav li:hover a {
    	position: absolute;
    	top:-1px;
    	left:0px;
    	background-image: url('/dev_msf/images/hovers.png');
    	height: 45px;
    	color: #252469;
    	padding-top: 3px;	
    }
    
    .mainNav li:hover .subMenu li.key-personnel a{background-image:none; position: static; color: white;}
    
    .mainNav .subMenu{
    	background: #252469;
    	border: 1px solid black;
    	padding: 10px;
    	width: 115px;
    
    	margin-left: -9999em;
    	text-align: left;
    	position: absolute;
    	top:45px;
    	left: 100px;;
    }
    
    .mainNav li:hover .subMenu{margin-left: -90px;}
    
    .mainNav li.about .subMenu li.key-personnel{
    	height: auto;
    
    	line-height: normal;
    }
    
    .mainNav li.about .subMenu li.key-personnel a{
    	background-image: none;
    	height: auto;
    	padding-top: 0px;
    	color: white;
    	width: auto;
    	height: auto;
    }
    
    .mainNav li.about .subMenu li.key-personnel a:hover{
    	color: #bc9d00;
    	width: inherit;
    	position: static;
    }

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,545
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Try adding this after the original rules.

    Code:
    .mainNav li.about a {
    background-position: -419px 0;
    }

  3. #3
    SitePoint Addict
    Join Date
    Aug 2010
    Posts
    349
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @Paul!

    Can you please explain? These sort of issues are hard for me to troubleshoot sometimes.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,545
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The top level nav changes its image on a:hover but when you move to the sublist the anchor is no longer hovered so any rules that you have for it will disappear.

    The top level anchor is kept in the hovered state by rules applied to the list element on hover e.g. li:hover > a. That means that while the list is hovered the top level anchor will still remain visible even when on the sublist because that is all part of the parent list. However the anchor does not have the correct background-position applied now because you applied it to the hover of the anchor only.

    The styles I supplied just ensure that the anchor has the background-position correct by default.

  5. #5
    SitePoint Zealot AirFor's Avatar
    Join Date
    Oct 2010
    Location
    Berrigan, NSW, Australia
    Posts
    132
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi,

    The top level nav changes its image on a:hover but when you move to the sublist the anchor is no longer hovered so any rules that you have for it will disappear.

    The top level anchor is kept in the hovered state by rules applied to the list element on hover e.g. li:hover > a. That means that while the list is hovered the top level anchor will still remain visible even when on the sublist because that is all part of the parent list. However the anchor does not have the correct background-position applied now because you applied it to the hover of the anchor only.

    The styles I supplied just ensure that the anchor has the background-position correct by default.
    Great explanation, I'm curious though. What other element could you set the hover to so you can avoid this?

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,545
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by AirFor View Post
    Great explanation, I'm curious though. What other element could you set the hover to so you can avoid this?
    For a drop down menu like this you only really needed to cater for li:hover > a and not li > a:hover as they are doing much the same thing except that in the former ensures that when hovering the list the anchor stays in the highlighted state while also traversing the submenu.


Bookmarks

Posting Permissions

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