Small dropdown menu problem

[bassa]

Heya!

I'm working on customizing this dropdown menu: http://dreamweaver.hudpleje.dk/.

My problem is that it appears as if the submenu items gets dropped down 1 pixel at a time when I am hovering over them.

And in Internet Explorer, the submenu items gets continuously pushed down 1 pixel, so it appears like the length of the submenu actually expands the further down you move your mouse.

Huh. I've spent hours trying to fix this problem, but I haven't managed to yet. Maybe I've stared myself blind at the issue.

Could someone take a look at the code and see if they can find/resolve the problem?

Thanks!

HTML code:

	<div id="nav-main" role="navigation"><!-- Dropdown Menu begin -->
		<ul role="menubar">
			<li id="nav-main-features" class="first"><a aria-haspopup="true" aria-owns="nav-main-features-submenu" tabindex="0" href="/en-US/firefox/features/">Features</a>
        		<ul id="nav-main-features-submenu" aria-expanded="false">
            	<li class="first"><a tabindex="-1" href="/en-US/firefox/features/">Features</a></li>
	            <li><a tabindex="-1" href="/en-US/firefox/security/">Security</a></li>
    	        <li><a tabindex="-1" href="/en-US/firefox/performance/">Performance</a></li>
        	    <li><a tabindex="-1" href="/en-US/firefox/customize/">Customization</a></li>
            	<li><a tabindex="-1" href="/en-US/firefox/video/">Videos</a></li>
	            <li class="last"><a tabindex="-1" href="/en-US/firefox/central/">Tour</a></li></ul></li>

			<li id="nav-main-mobile"><a aria-haspopup="true" aria-owns="nav-main-mobile-submenu" tabindex="0" href="/en-US/mobile/">Mobile</a>
	        	<ul id="nav-main-mobile-submenu" aria-expanded="false">
    	        <li class="first"><a tabindex="-1" href="/en-US/mobile/">Mobile Overview</a></li>
        	    <li><a tabindex="-1" href="/en-US/mobile/download/">Download</a></li>
            	<li><a tabindex="-1" href="/en-US/mobile/features/">Features</a></li>
	            <li><a tabindex="-1" href="https://addons.mozilla.org/en-US/mobile/?browse=featured">Customize</a></li>
    	        <li><a tabindex="-1" href="/en-US/mobile/sync/">Sync</a></li>
        	    <li><a tabindex="-1" href="https://developer.mozilla.org/en-US/mobile">Develop</a></li>
            	<li><a tabindex="-1" href="/en-US/mobile/getinvolved/">Get Involved</a></li>
	            <li><a tabindex="-1" href="/en-US/mobile/faq/">FAQ</a></li>
    	        <li class="last"><a tabindex="-1" href="https://blog.mozilla.com/mobile/">Blog</a></li></ul></li>

			<li id="nav-main-addons"><a aria-haspopup="true" aria-owns="nav-main-addons-submenu" tabindex="0" href="https://addons.mozilla.org/">Add-ons</a>
	        	<ul id="nav-main-addons-submenu" aria-expanded="false">
    	        <li class="first"><a tabindex="-1" href="https://addons.mozilla.org/firefox/">Firefox Add-ons</a></li>
        	    <li><a tabindex="-1" href="https://addons.mozilla.org/firefox/featured/">Featured Add-ons</a></li>
            	<li><a tabindex="-1" href="https://addons.mozilla.org/firefox/extensions/">Extensions</a></li>
	            <li><a tabindex="-1" href="https://addons.mozilla.org/firefox/themes/">Themes</a></li>
    	        <li><a tabindex="-1" href="http://www.getpersonas.com/">Personas</a></li>
        	    <li><a tabindex="-1" href="https://addons.mozilla.org/firefox/search-tools/">Search Tools</a></li>
            	<li><a tabindex="-1" href="https://addons.mozilla.org/firefox/language-tools/">Language Support</a></li>
	            <li><a tabindex="-1" href="https://addons.mozilla.org/firefox/collections/">Collections</a></li>
    	        <li><a tabindex="-1" href="https://addons.mozilla.org/mobile/">Mobile Add-ons</a></li>
        	    <li class="last"><a tabindex="-1" href="https://addons.mozilla.org/firefox/developers/">Developer Hub</a></li></ul></li>

			<li id="nav-main-support" ><a aria-haspopup="true" aria-owns="nav-main-support-submenu" tabindex="0" href="http://support.mozilla.com/">Support</a>
    	    	<ul id="nav-main-support-submenu" aria-expanded="false">
        	    <li class="first"><a tabindex="-1" href="http://support.mozilla.com/en-US/kb/">Firefox Support</a></li>
            	<li><a tabindex="-1" href="http://support.mozilla.com/mobile">Mobile Support</a></li>
	            <li class="last"><a tabindex="-1" href="http://www.mozilla.org/support/thunderbird/">Thunderbird Support</a></li></ul></li>

			<li id="nav-main-about"><a aria-haspopup="true" aria-owns="nav-main-about-submenu" tabindex="0" href="/en-US/about/">About</a>
	        	<ul id="nav-main-about-submenu" aria-expanded="false">
    	        <li class="first"><a tabindex="-1" href="/en-US/about/">About Firefox</a></li>
        	    <li><a tabindex="-1" href="/en-US/about/participate/">Participate</a></li>
            	<li><a tabindex="-1" href="/en-US/press/">Press Center</a></li>
	            <li><a tabindex="-1" href="/en-US/about/careers.html">Careers</a></li>
    	        <li><a tabindex="-1" href="/en-US/about/partnerships.html">Partnerships</a></li>
        	    <li><a tabindex="-1" href="/en-US/about/legal.html">Legal</a></li>
            	<li><a tabindex="-1" href="/en-US/about/contact.html">Contact Us</a></li>
	            <li class="last"><a tabindex="-1" href="http://blog.mozilla.com/">Blog</a></li></ul></li>
		</ul>
	</div><!-- Dropdown Menu end -->

CSS code:

/* DROPDOWN */
#nav-main {
	display:inline-block;
	height:30px;
	zoom:1;
	text-align:left;
	margin-top: 80px;
	clear: both;
	width: 100%;
	background-image: url(../images/bg_dropdown.png);
	background-repeat: repeat-x;
	background-position: center;
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #003264;
	border-bottom-color: #003264;
	}
#nav-main, #nav-main ul, #nav-main li {
	list-style:none;
	}
#nav-main ul {
	float:left;
	z-index:99;
	left:auto;
	margin:0;
	padding:0;
	}
#nav-main li {
	float:left;
	background:none;
	margin:0;
	padding:0;
	position:relative;
	z-index:10000;
	}
#nav-main a, #nav-main span {
	display:block;
	color:#fff;
	font-family:"Lucida Sans Unicode";
	font-size:13px;
	}
#nav-main ul {
	}
#nav-main ul li a, #nav-main ul li span {
	height:30px;
	display:block;
	float:left;
	text-transform:uppercase;
	padding-right: 20px;
	padding-bottom: 0;
	padding-left: 20px;
	line-height: 30px;
	}
#nav-main ul li a {
	}
#nav-main li ul, .js #nav-main li:hover ul {
	position:absolute;
	left: -999em;
	opacity:0;
	}
#nav-main li:hover ul, .js #nav-main li.hover ul {
	left:1px;
	opacity:1;
	margin-top: 30px;
	}
#nav-main ul li ul li {
	float:none;
	}
#nav-main ul li a, #nav-main ul li a:link, #nav-main ul li a:visited {
	color:#fff;
	text-decoration:none;
	}
.js #nav-main ul a:hover {
	background:transparent;
	}
#nav-main ul a:hover, #nav-main ul a:focus, .js #nav-main ul a:focus, #nav-main ul a:active {
	outline:0;
	color:#fff;
	background-color: #50A0F0;
	height: 27px;
	line-height: 28px;
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: #DC1414;
	margin-top: 1px;
	}
#nav-main ul ul, #nav-main ul ul li {
	height:auto;
	border:0;
	}
#nav-main ul ul {
	width:180px;
	background-color: #003264;
	padding-bottom: 5px;
	margin-left: -1px;
	padding-top: -2px;
	}
#nav-main ul li ul li a, #nav-main ul li ul li a:link, #nav-main ul li ul li a:visited, #nav-main ul li ul li span {
	overflow:hidden;
	height:30px;
	float:none;
	display:block;
	font-size:13px;
	font-weight:normal;
	position:relative;
	text-transform:none;
	font-family: "Lucida Sans Unicode";
	padding-top: 0px;
	padding-right: 20px;
	padding-bottom: 0px;
	padding-left: 20px;
	}
#nav-main ul li ul li a:hover, #nav-main ul li ul li a:focus, .js #nav-main ul li ul li a:focus, #nav-main ul li ul li a:active {
	background:#263c7b;
	background-color: #50A0F0;
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: #DC1414;
	height: 27px;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #B5D5FA;
	line-height: 27px;
	}

Cheers,
Bassa

[azoomer]

Maybe it would help if you set the margin-top:0; in this part of the css

#nav-main ul a:hover, #nav-main ul a:focus, .js #nav-main ul a:focus, #nav-main ul a:active {
	outline:0;
	color:#fff;
	background-color: #50A0F0;
	height: 27px;
	line-height: 28px;
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: #DC1414;
	margin-top: 0;
	}

[bassa]

Thank you so much, man! Awesome!

I specifically set that margin to 0 because I wanted a bright-blue border on top of the hovered main menu items, but I just replaced it with a border.

Duh! Why didn't I think of that in the first place.

See! You just need a fresh set of eyes sometimes.

Again, thank you very much!

PS: Dropdown menu is perfect now, see for yourself: http://dreamweaver.hudpleje.dk/.


Cheers,
Bassa

[azoomer]

Ingen årsag, eller hvad det nu er man siger.