: Weird CSS-behaviour <!DOCTYPE html> <html> <head> <title>PakHet</title>
<!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.
More posts by @Angela700
1 Comments
Sorted by latest first Latest Oldest Best
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;
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.