Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Zachary grace
Zachary grace
6,682 Points

too much space between menu and drop down items

I have a horizontal navigation bar, and one of the list items has a drop down menu. My issue is that when you hover over the list with the drop down menu you see the drop down menu, but when you try to go to click on one of the list items in the drop down menu it disappears. Any suggestions?

Daniel Veremchuk
Daniel Veremchuk
31 Points

If you want to move the whole navigation down, then simply move down the cssmenu class or id instead of the ul.

Zachary grace
Zachary grace
6,682 Points

Perfect thanks, brother.

Zachary grace
Zachary grace
6,682 Points

Perfect thanks, brother.

2 Answers

Daniel Veremchuk
Daniel Veremchuk
31 Points

I feel like you should have surrounded this in CSS Markdown, but from skimming the code it looks like you have:

cssmenu ul {
    list-style: none; 
    padding: 0; 
    margin: 33px 0 0 0; 
    line-height: 1; 
}

The 

margin: 33px 0 0 0;

Is making that the ul is moved down 33px, this creates a space so your mouse can't touch the drop down ul as the rest of ul's are inheriting this property.

Zachary grace
Zachary grace
6,682 Points

Exactly. I'm sure there's a better way but when I put margin: 0; it makes the whole navigation at the top of the header. I want it to be centered in the header.

Daniel Veremchuk
Daniel Veremchuk
31 Points

Meant to reply to this one, not used to this forum yet.

If you want to move the whole navigation down, then simply move down the cssmenu class or id instead of the ul. I assume your cssmenu is a class?

Zachary grace
Zachary grace
6,682 Points

Yeah it's an id. Great idea. Thank you.

Daniel Veremchuk
Daniel Veremchuk
31 Points
Daniel Veremchuk
Daniel Veremchuk
31 Points

There's probably a space due to some margin in your ul? this might be preventing the mouse from even touching the drop down?

Can you paste the CSS?

Zachary grace
Zachary grace
6,682 Points

Fair warning, it's kinda long. :P

cssmenu {

position: relative; height: 44px; /background: #2b2f3a;/ width: auto; }

cssmenu ul {

list-style: none; padding: 0; margin: 33px 0 0 0; line-height: 1; }

cssmenu > ul {

position: relative; display: block; /background: #2b2f3a;/ /width: 100%;/ z-index: 500; }

cssmenu:after,

cssmenu > ul:after {

content: '.'; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }

cssmenu.align-right > ul > li {

float: right; }

cssmenu.align-center ul {

text-align: center; }

cssmenu.align-center ul ul {

text-align: left; }

cssmenu > ul > li {

display: inline-block; position: relative; margin: 0; padding: 0; }

cssmenu > ul > #menu-button {

display: none; }

cssmenu ul li a {

display: block; font-family: Helvetica, sans-serif; text-decoration: none; }

cssmenu > ul > li > a {

font-size: 14px; font-weight: bold; padding: 15px 20px; /color: #7a8189;/ color: #fff; text-transform: uppercase; -webkit-transition: color 0.25s ease-out; -moz-transition: color 0.25s ease-out; -ms-transition: color 0.25s ease-out; -o-transition: color 0.25s ease-out; transition: color 0.25s ease-out; }

cssmenu > ul > li.has-sub > a {

padding-right: 32px; }

cssmenu > ul > li:hover > a {

color: #ffffff; }

cssmenu li.has-sub::after {

display: block; content: ''; position: absolute; width: 0; height: 0; }

cssmenu > ul > li.has-sub::after {

right: 10px; top: 20px; border: 5px solid transparent; border-top-color: #7a8189; }

cssmenu > ul > li:hover::after {

border-top-color: #ffffff; }

indicatorContainer {

position: absolute; height: 12px; width: 100%; bottom: 0px; overflow: hidden; z-index: -1; }

pIndicator {

position: absolute; height: 0; width: 100%; border: 12px solid transparent; border-top-color: #2b2f3a; z-index: -2; -webkit-transition: left .25s ease; -moz-transition: left .25s ease; -ms-transition: left .25s ease; -o-transition: left .25s ease; transition: left .25s ease; }

cIndicator {

position: absolute; height: 0; width: 100%; border: 12px solid transparent; border-top-color: #2b2f3a; top: -12px; right: 100%; z-index: -2; }

cssmenu ul ul {

position: absolute; left: -9999px; top: 70px; opacity: 0; -webkit-transition: opacity .3s ease, top .25s ease; -moz-transition: opacity .3s ease, top .25s ease; -ms-transition: opacity .3s ease, top .25s ease; -o-transition: opacity .3s ease, top .25s ease; transition: opacity .3s ease, top .25s ease; z-index: 1000; }

cssmenu ul ul ul {

top: 37px; padding-left: 5px; }

cssmenu ul ul li {

position: relative; }

cssmenu > ul > li:hover > ul {

left: auto; top: 44px; opacity: 1; }

cssmenu.align-right > ul > li:hover > ul {

left: auto; right: 0; opacity: 1; }

cssmenu ul ul li:hover > ul {

left: 170px; top: 0; opacity: 1; }

cssmenu.align-right ul ul li:hover > ul {

left: auto; right: 170px; top: 0; opacity: 1; padding-right: 5px; }

cssmenu ul ul li a {

width: 130px; border-bottom: 1px solid #eeeeee; padding: 10px 20px; font-size: 12px; color: #9ea2a5; background: #ffffff; -webkit-transition: all .35s ease; -moz-transition: all .35s ease; -ms-transition: all .35s ease; -o-transition: all .35s ease; transition: all .35s ease; }

cssmenu.align-right ul ul li a {

text-align: right; }

cssmenu ul ul li:hover > a {

background: #f2f2f2; color: #8c9195; }

cssmenu ul ul li:last-child > a,

cssmenu ul ul li.last > a {

border-bottom: 0; }

cssmenu > ul > li > ul::after {

content: ''; border: 6px solid transparent; width: 0; height: 0; border-bottom-color: #ffffff; position: absolute; top: -12px; left: 30px; }

cssmenu.align-right > ul > li > ul::after {

left: auto; right: 30px; }

cssmenu ul ul li.has-sub::after {

border: 4px solid transparent; border-left-color: #9ea2a5; right: 10px; top: 12px; -moz-transition: all .2s ease; -ms-transition: all .2s ease; -o-transition: all .2s ease; transition: all .2s ease; -webkit-transition: -webkit-transform 0.2s ease, right 0.2s ease; }

cssmenu.align-right ul ul li.has-sub::after {

border-left-color: transparent; border-right-color: #9ea2a5; right: auto; left: 10px; }

cssmenu ul ul li.has-sub:hover::after {

border-left-color: #ffffff; right: -5px; -webkit-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -o-transform: rotateY(180deg); transform: rotateY(180deg); }

cssmenu.align-right ul ul li.has-sub:hover::after {

border-right-color: #ffffff; border-left-color: transparent; left: -5px; -webkit-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -o-transform: rotateY(180deg); transform: rotateY(180deg); } @media all and (max-width: 800px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) { #cssmenu { width: auto; } #cssmenu.align-center ul { text-align: left; } #cssmenu.align-right > ul > li { float: none; } #cssmenu ul { width: auto; } #cssmenu .submenuArrow, #cssmenu #indicatorContainer { display: none; } #cssmenu > ul { height: auto; display: block; } #cssmenu > ul > li { float: none; } #cssmenu li, #cssmenu > ul > li { display: none; } #cssmenu ul ul, #cssmenu ul ul ul, #cssmenu ul > li:hover > ul, #cssmenu ul ul > li:hover > ul, #cssmenu.align-right ul ul, #cssmenu.align-right ul ul ul, #cssmenu.align-right ul > li:hover > ul, #cssmenu.align-right ul ul > li:hover > ul { position: relative; left: auto; top: auto; opacity: 1; padding-left: 0; padding-right: 0; right: auto; } #cssmenu ul .has-sub::after { display: none; } #cssmenu ul li a { padding: 12px 20px; } #cssmenu ul ul li a { border: 0; background: none; width: auto; padding: 8px 35px; } #cssmenu.align-right ul ul li a { text-align: left; } #cssmenu ul ul li:hover > a { background: none; color: #8c9195; } #cssmenu ul ul ul a { padding: 8px 50px; } #cssmenu ul ul ul ul a { padding: 8px 65px; } #cssmenu ul ul ul ul ul a { padding: 8px 80px; } #cssmenu ul ul ul ul ul ul a { padding: 8px 95px; } #cssmenu > ul > #menu-button { display: block; cursor: pointer; } #cssmenu #menu-button > a { padding: 14px 20px; } #cssmenu ul.open li, #cssmenu > ul.open > li { display: block; } #cssmenu > ul.open > li#menu-button > a { color: #fff; border-bottom: 1px solid rgba(150, 150, 150, 0.1); } #cssmenu ul ul::after { display: none; } #cssmenu #menu-button::after { display: block; content: ''; position: absolute; height: 3px; width: 22px; border-top: 2px solid #7a8189; border-bottom: 2px solid #7a8189; right: 20px; top: 15px; } #cssmenu #menu-button::before { display: block; content: ''; position: absolute; height: 3px; width: 22px; border-top: 2px solid #7a8189; right: 20px; top: 25px; } #cssmenu ul.open #menu-button::after, #cssmenu ul.open #menu-button::before { border-color: #fff; } }

Zachary grace
Zachary grace
6,682 Points

changing #cssmenu ul { margin:0; } fixed it, but now the whole navigation bar is at the top of the header which I don't particularly like either.