Results 1 to 4 of 4

Thread: Small dropdown menu problem

  1. #1
    Join Date
    Apr 2008
    Posts
    109
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default Small dropdown menu problem

    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:
    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:
    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

  2. #2
    Join Date
    Oct 2009
    Posts
    845
    Thanks
    14
    Thanked 189 Times in 188 Posts

    Default

    Maybe it would help if you set the margin-top:0; in this part of the css
    Code:
    #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;
    	}

  3. The Following User Says Thank You to azoomer For This Useful Post:

    bassa (02-03-2011)

  4. #3
    Join Date
    Apr 2008
    Posts
    109
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default

    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

  5. #4
    Join Date
    Oct 2009
    Posts
    845
    Thanks
    14
    Thanked 189 Times in 188 Posts

    Default

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

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
  •