Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.
            <!DOCTYPE html>
            <html>
            <head>
                <title>PakHet</title>
                <link rel="stylesheet" type="text/css" href="css/basis.css" />
            </head>
            <body>
                <div class="wrapper">
                    <div id='cssmenu'>
                        <ul>
                           <li class="active"><a href='index.html'><span>Start</span></a></li>
                           <li><a href='pakhet.html'><span>Over PakHet</span></a></li>
                           <li><a href='overons.html'><span>Over Ons</span></a></li>
                           <li class='has-sub '><a href='#'><span>Uw pakket</span></a>
                              <ul>
                                 <li><a href='aanmelden.php'><span>Aanmelden</span></a></li>
                                 <li><a href='traceren.php'><span>Traceren</span></a></li>
                              </ul>
                            </li>
                        </ul>
                    </div>
                    <div class="header">
                        <h1>Hier komt de titel van de website</h1>
                    </div>
                    <div class="content">
                        <p>Dit is de tekst van de content. Dit is de indexpagina.</p>
                    </div>
                </div>
            </body>
            </html>

And this is the CSS:

            /* CSS RESET */

            html, body, div, span, applet, object, iframe,
            h1, h2, h3, h4, h5, h6, p, blockquote, pre,
            a, abbr, acronym, address, big, cite, code,
            del, dfn, em, img, ins, kbd, q, s, samp,
            small, strike, strong, sub, sup, tt, var,
            b, u, i, center,
            dl, dt, dd, ol, ul, li,
            fieldset, form, label, legend,
            table, caption, tbody, tfoot, thead, tr, th, td,
            article, aside, canvas, details, embed, 
            figure, figcaption, footer, header, hgroup, 
            menu, nav, output, ruby, section, summary,
            time, mark, audio, video, *{
                margin: 0;
                padding: 0;
                border: 0;
                vertical-align: baseline;
            }
            table {
                border-collapse: collapse;
                border-spacing: 0;
            }

            /* Einde CSS RESET, nu echte code */
            html, body{
                background:url(../images/bg_picture.jpg) fixed no-repeat;
            }
            .wrapper{
                margin:0 auto;
            }
            .header{
                margin:0 auto;
                background-color:rgba(0, 0, 0, 0.4);
            }
            .content{
                background-color:rgba(0, 0, 0, 0.4);
                width:600px;
                margin:0 auto;
                margin-top:50px;
            }
            .content p{
                color:white;
                text-shadow:1px 1px 0 rgba(0,0,0, 0.5);
                font-family:"Lucida Grande", sans-serif;
            }

            #cssmenu{ height:37px; display:block; padding:0; margin: 0;  border:1px solid; } 
            #cssmenu > ul {list-style:inside none; padding:0; margin:0;} 
            #cssmenu > ul > li {list-style:inside none; padding:0; margin:0; float:left; display:block; position:relative;} 
            #cssmenu > ul > li > a{ outline:none; display:block; position:relative; padding:12px 20px; font:bold 13px/100% "Lucida Grande", Helvetica, sans-serif; text-align:center; text-decoration:none; text-shadow:1px 1px 0 rgba(0,0,0, 0.4); } 
            #cssmenu > ul > li:first-child > a{border-radius:5px 0 0 5px;} 
            #cssmenu > ul > li > a:after{ content:''; position:absolute; border-right:1px solid; top:-1px; bottom:-1px; right:-2px; z-index:99; } 
            #cssmenu ul li.has-sub:hover > a:after{top:0; bottom:0;} 
            #cssmenu > ul > li.has-sub > a:before{ content:''; position:absolute; top:18px; right:6px; border:5px solid transparent; border-top:5px solid #fff; } 
            #cssmenu > ul > li.has-sub:hover > a:before{top:19px;} 
            #cssmenu ul li.has-sub:hover > a{ background:#3f3f3f; border-color:#3f3f3f; padding-bottom:13px; padding-top:13px; top:-1px; z-index:999; } 
            #cssmenu ul li.has-sub:hover > ul, #cssmenu ul li.has-sub:hover > div{display:block;} 
            #cssmenu ul li.has-sub > a:hover{background:#3f3f3f; border-color:#3f3f3f;} 
            #cssmenu ul li > ul, #cssmenu ul li > div{ display:none; width:auto; position:absolute; top:38px; padding:10px 0; background:#3f3f3f; border-radius:0 0 5px 5px; z-index:999; } 
            #cssmenu ul li > ul{width:200px;} 
            #cssmenu ul li > ul li{display:block; list-style:inside none; padding:0; margin:0; position:relative;} 
            #cssmenu ul li > ul li a{ outline:none; display:block; position:relative; margin:0; padding:8px 20px; font:10pt "Lucida Grande", Helvetica, sans-serif; color:#fff; text-decoration:none; text-shadow:1px 1px 0 rgba(0,0,0, 0.5); } 
            #cssmenu, #cssmenu > ul > li > ul > li a:hover{ background:#333333; background:-moz-linear-gradient(top, #333333 0%, #222222 100%); background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#333333), color-stop(100%,#222222)); background:-webkit-linear-gradient(top, #333333 0%,#222222 100%); background:-o-linear-gradient(top, #333333 0%,#222222 100%); background:-ms-linear-gradient(top, #333333 0%,#222222 100%); background:linear-gradient(top, #333333 0%,#222222 100%); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#222222',GradientType=0 ); } 
            #cssmenu{border-color:#000;} 
            #cssmenu > ul > li > a{border-right:1px solid #000; color:#fff;} 
            #cssmenu > ul > li > a:after{border-color:#444;} 
            #cssmenu > ul > li > a:hover{background:#111;}
            #cssmenu > ul > li.active > a{
                color:orange;
            }
            .header{
                clear:both;
            }

The problem is that, whenever I hover on the dropdown-menu, that a 1px margin appears in between the menu and the header. Can I solve that? I can't seem to find the solution.

share|improve this question
add comment

closed as off topic by Su', John Conde Nov 17 '12 at 21:39

Questions on Webmasters Stack Exchange are expected to relate to webmastering within the scope defined by the community. Consider editing the question or leaving comments for improvement if you believe the question can be reworded to fit within the scope. Read more about reopening questions here.If this question can be reworded to fit the rules in the help center, please edit the question.

1 Answer

up vote 0 down vote accepted

One solution is on your #cssmenu > ul > li style to set height: 37px; because the normal height now is 37px on hover it's 39px I don't see where it's changing. Still looking.

Update

The problem is the style below the border is adding 1px above and below making it 39px, you don't have that set on hover or the class above which I mentioned. Move the height style and you should be fine.

#cssmenu {
height: 37px;
display: block;
padding: 0;
margin: 0;
border: 1px solid;
share|improve this answer
    
Oh, thank you so much! I changed the height to 38px on #cssmenu and it worked! Thank you so much! –  WMRKameleon Nov 17 '12 at 21:26
add comment

Not the answer you're looking for? Browse other questions tagged or ask your own question.