Need help with menu issue

HTML & CSS
1

For, my site navigation I am using Blake Haswell’s take on a Sons of Suckerfish menu. The problem is in FireFox I can go to a page in a drop down menu but can’t go to another page in the same drop down menu. It just doesn’t work.

The page I am referring to is: Resources. Once I go there in FireFox, I can’t go to Album Setup or Album Resizing.

I tried entering Stomme’s fix but I am not sure I did it right. I think Stromme’s fix is supposed to correct this…

[INDENT]#menu ul a:focus:hover {
margin-left: 0;
}[/INDENT]

Here is my menu code:

 <ul id="nav">
            <li> <a href="index.html">Home</a> </li>
            <li> <a href="products-indesign-actions-scripts.html">Products</a> </li>
            <li> <a href="why-indesign-vs-photoshop.html">Why InDesign</a> </li>
            <li> <a href="free-indesign-wedding-album-tutorials/resources.html">Free Resources</a>
                <ul>
                    <li> <a href="free-indesign-wedding-album-tutorials/album-setup.html">Album Setup</a> </li>
                    <li> <a href="free-indesign-wedding-album-tutorials/album-resize.html">Album Resizing</a> </li>
                </ul>
            </li>
            <li> <a href="faqs-about-albums-in-design.html">Faqs</a> </li>
            <li> <a href="friends-albums-in-design.html">Friends</a> </li>
            <li> <a href="contact-albumsindesign.html">Contact</a> </li>
            <li> <a href="free-trial-albumsindesign.html">Free Trial</a> </li>
            <li> <a href="purchase.html">Buy</a> </li>
        </ul>
        <script type="text/javascript">dropdown('nav', 'hover', 250);</script>
    </div>

Here is my CSS:

#nav, #nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
#nav {
    background: #5876E6 url(menu_images/nav.png) 0 0 repeat-x;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1em; /* 14px / 16px */
    font-weight: bold;
    height: 2.286em; /* 32px / 14px */
    line-height: 1.5em; /* 21px / 14px */
    width: 960px;
}
#nav li {
    background: #5876E6 url(menu_images/li.png) right top no-repeat;
    float: left;
    height: 2.286em; /* 32px / 14px */
    margin: 0;
    padding: 0;
    position: relative;
}
#nav a {
    background: url(menu_images/a.gif) left top no-repeat;
    color: #F8F8F8;
    display: block;
    padding: 0.286em 20px 0.5em; /* 4px 30px 7px */
    text-decoration: none;
}
#nav a:hover, #nav a:focus {
	 color: #FFCC00
}
#nav ul {
    background: #5876E6;
    left: 0;
    font-size: 0.857em; /* 12px / 14px */
    line-height: 1.5em; /* 18px / 12px */
    position: absolute;
    top: 2.667em; /* 32px / 12px */
    width: 180px;
}
#nav ul li {
    background: none;
    float: none;
    height: auto;
    width: 180px;
}
#nav ul a {
    background: none;
    padding: 0.083em 30px 0.25em; /* 1px 30px 3px */
    width: 120px;
}
#nav ul ul {
    font-size: 1em;
}
#nav ul a:hover, #nav ul a:focus {
    background: #5876E6;
}
#nav ul .hover>a {
    background: #5876E6;
}
#nav ul ul {
    left: 180px;
    top: 0.5em; /* 6px / 12px */
}
#nav ul, #nav :hover ul ul, #nav .hover ul ul {
    margin-left: -9999px;
}
#nav li:hover>ul, #nav li.hover>ul, #nav a:focus+ul, #nav ul ul, #nav .hover a:focus {
    margin-left: 0;
}
#nav ul a:focus {
    margin-left: 9999px;
	}

/*  Stomme Fix  */
#menu ul a:focus:hover {
margin-left: 0;
}

Thanks for any help you may have.

2

I think you have missed the margin setting here:

#nav ul a:focus {
    margin-left: 9999px;
}

Shouldn’t that be 0? :slight_smile:

Because when you click the mouse, the :hover stops (becomes :active in IE) but :focus stay/add. It works with the keyboard as the focus sticks with the element though it disappear.

3

Erik: no, the margin-left: 9999px moves the focussed submenu onscreen (when you don’t have Javascript or anything) so that, while the whole submenu won’t appear, at least the submenu item will. The submenu is pulled offscreen with margin-left: -9999px. So adding 9999px on :focus brings that submenu item back onscreen.

So on a menu where I’m basically doing the same thing:


#menu ul {
  position: absolute;
  left: 0;
  width: 9.6em; 
  margin-left: -9999px; /*in px voor :focus*/
  background-color: #333;
  border-top: 1px solid #fff;
  border-bottom: 5px solid #f60;
}
	#menu li:hover>ul, #menu li.hover>ul, #menu a:focus+ul, 
        #menu .hover a:focus {
	  margin-left: 0;
	}
	#menu ul a:focus {
	  width: 10.8em; /*need width*/
	  margin-left: 9999px; /*move onscreen*/
	}
/*IE6 wilt z'n eigen declaration*/
* html #menu li:hover ul, * html #menu ul li:hover ul {margin-left: auto;}

		#menu ul a:focus:hover {
		  margin-left: 0; /*Gecko, Konq*/
		}

		* html #menu ul a:active:hover {
		  margin-left: auto;  /*undo above for IE6*/
		}
			* html #menu ul ul a:active:hover {
			  margin-top: 0;
			}

the :hover stops (becomes :active in IE) but :focus stay/add.

Unfortunately in FF and Konq and IE6, when you are clicking on a link, you are hovering and focussing at the same time (hover does not get cancelled… I believe it SHOULD so this would be a BUG), and those browsers add both of those together… meaning the link is now 9999px + 9999px.

I’ll have to look closer to see what’s going on with Braxton’s menu. Right now I don’t see the fix in the live site linked to:


/*  Navigation  */
/*  Remove the last underscore on the menu_images_ folder to activate graphics background  */

#nav, #nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
#nav {
    background: #5876E6 url(menu_images/nav.png) 0 0 repeat-x;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1em; /* 14px / 16px */
    font-weight: bold;
    height: 2.286em; /* 32px / 14px */
    line-height: 1.5em; /* 21px / 14px */
    width: 960px;
}
#nav li {
    background: #5876E6 url(menu_images/li.png) right top no-repeat;
    float: left;
    height: 2.286em; /* 32px / 14px */
    margin: 0;
    padding: 0;
    position: relative;
}
#nav a {
    background: url(menu_images/a.gif) left top no-repeat;
    color: #F8F8F8;
    display: block;
    padding: 0.286em 20px 0.5em; /* 4px 30px 7px */
    text-decoration: none;
}
#nav a:hover, #nav a:focus {
	 color: #FFCC00
}
#nav ul {
    background: #5876E6;
    left: 0;
    font-size: 0.857em; /* 12px / 14px */
    line-height: 1.5em; /* 18px / 12px */
    position: absolute;
    top: 2.667em; /* 32px / 12px */
    width: 180px;
}
#nav ul li {
    background: none;
    float: none;
    height: auto;
    width: 180px;
}
#nav ul a {
    background: none;
    padding: 0.083em 30px 0.25em; /* 1px 30px 3px */
    width: 120px;
}
#nav ul ul {
    font-size: 1em;
}
#nav ul a:hover, #nav ul a:focus {
    background: #5876E6;
}
#nav ul .hover>a {
    background: #5876E6;
}
#nav ul ul {
    left: 180px;
    top: 0.5em; /* 6px / 12px */
}
#nav ul, #nav :hover ul ul, #nav .hover ul ul {
    margin-left: -9999px;
}
#nav li:hover>ul, #nav li.hover>ul, #nav a:focus+ul, #nav ul ul, #nav .hover a:focus {
    margin-left: 0;
}
#nav ul a:focus {
    margin-left: 9999px;
}
/*  END    Navigation   */

I think the fix just needs to be added after that #nav ul a:focus line… and if adding that doesn’t work, leave the not-working code in there so when we check the live site we can maybe see WHY it’s not working. Right now, all I can say is, it’s not working because it’s not there.

4

According to OP post, apparently he forgot to rename the selector in your fix Mallory.

It would work if named correctly I think. :wink:


#nav ul a:focus {
    margin-left: 9999px;
}
#nav ul a:focus:hover {
    margin-left: 0;
}
5

Yes, Stomme, I hadn’t changed the name to nav. Sorry about that guys. It works now just fine.

Thank you so much!!!

6

Haha, I didn’t even see the #menu from #nav… I just looked for :focus:hover in the source. lawlz.