Changing padding on navigation link breaks hover (sfhover)

I’m not enough of a css whiz to know how to fix what I broke - hoping someone can help!

I edited the background header image to make it fixed width to match the rest of the blog, but then the navigation links starting with Home | About etc. were smooshed up right against the edge of the graphic. I changed the padding in the following two lines in the style.css file to move the menu a bit to the right:

#globalnav ul li {float: left; padding: 3px 5px 0px 10px; background:url(images/back-nav-toplist.gif) no-repeat right center }

#nav li a, #nav li a:link {display: block; font-size: 12px; text-decoration: none; padding: 6px 10px 15px 10px; font-weight:bold }

But now when I hover over About, the menu with the two subpages below it disappears before I can click on them!

I know this has something to do with sfhover and absolute positioning, but as I said, I dunno enough CSS to know how to shift the menu to the right without it messing up the hover.

I’d be very grateful for any suggestions or help!

(Unfortunately the site is behind a login so I can’t provide a link…)

Well could you take the dropdown portion and just give us that code? The HTML and full CSS for that? Just enough so we can replicate it? :slight_smile:

Oops yes, sorry.

Here is the relevant HTML, I think:

<div id="globalnav">                
        	<div id="navpocket">                
                <ul id="nav" class="sf-js-enabled sf-shadow">                
                                        <li class="current_page_item"><a rel="nofollow" href="http://www.slconvention.org/staging">Home</a></li>
                                        
                    <li class="page_item page-item-2"><a title="About" href="http://www.slconvention.org/staging/?page_id=2">About</a>
<ul style="display: none; visibility: hidden;" class="sf-js-enabled sf-shadow">
	<li class="page_item page-item-13"><a title="About Subpage 1" href="http://www.slconvention.org/staging/?page_id=13">About Subpage 1</a></li>
	<li class="page_item page-item-14"><a title="About Subpage 2" href="http://www.slconvention.org/staging/?page_id=14">About Subpage 2</a></li>
</ul>
</li>
<li class="page_item page-item-3"><a title="Convention Details" href="http://www.slconvention.org/staging/?page_id=3">Convention Details</a></li>
<li class="page_item page-item-5"><a title="Registration" href="http://www.slconvention.org/staging/?page_id=5">Registration</a></li>
<li class="page_item page-item-6"><a title="Travel Info" href="http://www.slconvention.org/staging/?page_id=6">Travel Info</a></li>
<li class="page_item page-item-4"><a title="Volunteers" href="http://www.slconvention.org/staging/?page_id=4">Volunteers</a></li>
<li class="page_item page-item-7"><a title="Sponsors" href="http://www.slconvention.org/staging/?page_id=7">Sponsors</a></li>
<li class="page_item page-item-8"><a title="Contact" href="http://www.slconvention.org/staging/?page_id=8">Contact</a></li>
                    
                                    </ul>
        	</div>
        </div>

And then the original CSS:

/* *** LINK / NAVIGATION *** */
	#logo a:link, #logo a:visited {color:#4d4b4b }
	
	#globalnav {position: absolute; top: 57px; left:-8px; height: 36px; z-index: 9997; width:908px }
	
	#globalnav ul {list-style: none; float: left }
	
	#globalnav ul li {float: left; padding: 0 10px; background:url(images/back-nav-toplist.gif) no-repeat right center }
	
	#globalnav ul li li {background: none }
	
	#globalnav ul li.last { background: none }
	
	#globalnav a:link, #globalnav a:visited {color: #666; text-decoration: none; font-size: 12px; font-family:Arial, Helvetica, sans-serif }
	
	#globalnav a:hover {color: #fb2300; text-decoration:underline }
	
	#navpocket {height: 36px; overflow:hidden }
	
	#nav li a, #nav li a:link {display: block; font-size: 12px;	text-decoration: none; padding:11px 0; font-weight:bold }
	
	#nav li a:hover, #nav li a:active {display: block; text-decoration: none }
		
	#nav li li a, #nav li li a:link, #nav li li a:visited {color: #eee; background: url(images/back-navi.png) repeat-x; 
		width: 126px; float: none; margin: 0px; padding:10px 11px; border-bottom: 1px solid #333; border-left: 1px solid #333; border-right: 1px solid #333 }
		
	#nav li li a:hover, #nav li li a:active {color:#FF0000; text-decoration:none }

	#nav li ul {position: absolute; left: -999em; height: auto; width: 150px; margin:-1px 0 0 -12px; border-width:0 1px 1px 1px; border-color:#1a1a1a; border-style:solid }
	
	#nav li li {padding: 0 }

	#nav li ul ul {margin: -36px 0 0 150px }

	#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {left: -999em }

	#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {left: auto}
	
	#nav li:hover, #nav li.sfhover { position: static }
	
	#navpocket .nav-wide {width:100% }
		
	#nav .current_page_item a:link, #nav .current_page_item a:visited {color: #fb2300 }

I changed the padding in lines 4 and 10 of that CSS block, and that’s what broke the hover.

Does that help? Thanks so much for taking a look!

HI,

It’s a little awkward to test but it looks as though the drop down is too far away now and is no longer in contact with the trigger element. If it doesn’t maintain contact the the hover effect is lost as you move from the trigger to the dropdown.

If the padding is what you needed then move the ul closer.

e.g.


#nav li ul {
    position: absolute;
    left: -999em;
    height: auto;
    width: 150px;
  [B]  margin:-3px 0 0 -12px;[/B]
    border-width:0 1px 1px 1px;
    border-color:#1a1a1a;
    border-style:solid


That worked! Thank you so very much. :slight_smile: