主要想法是在整个站点中使用特定颜色的菜单。为了做到这一点，我为 6 个主要页面中的每一个都制作了不同的样式。每个主页上都有一个子菜单。
这是我想要的样子:
这是它的样子:
如您所见，我很难正确设置子菜单。它和主菜单之间似乎有一些奇怪的差距。我在 css 的开头放置了 * margin/padding/border 0 规则，所以我仍然不知所措。
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>DDS / Om skolen</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<!--BODY-->
<body>
<!--WRAPPER-->
<div id="wrapper">
<!--HEADER-->
<div id="header">
<div id="headlogo">
<h1>Den Demokratiske Skole</h1>
</div>
</div>
<!--MENUER-->
<div id="menu">
<!--NAV ABC-->
<div id="navbara">
</div>
<!--NAV ZXY-->
<div id="navbary">
</div>
<ul id="nav">
<!--INBOUND-->
<li><a href="#">OM SKOLEN</a></li>
<li><a href="#">OPTAGELSE</a></li>
<li><a href="#">KONTAKT</a></li>
<li><a href="#">MERE INFO</a></li>
<!--OUTBOUND-->
<li><a href="#">FOREDRAG</a></li>
<li><a href="#">PRESSE</a></li>
</ul>
</div>
<div id="navmarka">
</div>
<div id="subnav">
<ul>
<li><a href="#">SKOLEN</a></li>
<li><a href="#">VÆRDIER</a></li>
<li><a href="#">ANSATTE</a></li>
<li><a href="#">BESTYRELSEN</a></li>
<li><a href="#">VENNEKREDS</a></li>
<li><a href="#">INTRANET</a></li>
</ul>
</div>
<!--CONTENT-->
<div id="content">
</div>
<div id="footer">
</div>
</div>
</body>
</html>
CSS:
@charset "UTF-8";
/*OVERALLS*/
* {
margin: 0px;
border: 0px;
padding: 0 px;
}
h1 {
font-size: 10px;
text-indent: -99999px;
}
/*SINGLES*/
#wrapper {
margin-right: auto;
margin-left: auto;
width: 780px;
margin-top: 20px;
height: auto;
}
#header {
width: 780px;
height: 84px;
float: left;
margin-bottom: 10px;
}
#headlogo {
background-image: url(../images/headerlogo.png);
height: 84px;
width: 215px;
float: left;
}
#menu {
height: 30px;
width: 780px;
float: left;
}
#bars {
float: left;
height: 10px;
}
/*navbarABC*/
#navbara {
height: 10px;
width: 381px;
float: left;
margin-right: 26px;
background-color: #3FA9F5;
}
#navbarb {
height: 10px;
width: 380px;
float: left;
margin-right: 26px;
background-color: #3CF;
}
#navbarc {
height: 10px;
width: 380px;
float: left;
margin-right: 26px;
background-color: #3CF;
}
#navbard {
height: 10px;
width: 380px;
float: left;
margin-right: 26px;
background-color: #3CF;
}
#navbare {
height: 10px;
width: 380px;
float: left;
margin-right: 26px;
background-color: #3CF;
}
/*navbarZXY*/
#navbarz {
height: 10px;
width: 154px;
float: left;
background-color: #3CF;
}
#navbarx {
height: 10px;
width: 154px;
float: left;
background-color: #3CF;
}
#navbary {
height: 10px;
width: 154px;
float: left;
background-color: #000;
}
#nav {
float:left;
padding: 0px;
width: 780px;
font-size: 14px;
font-weight: 100;
height: 10px;
margin-top: 5px;
}
#nav ul{
list-style-type:none;
}
#nav li{
display:inline;
margin-right: 21px;
}
#nav li a{
text-decoration: none;
font-family: Helvetica;
color: #000;
}
#navmarka {
height: 1px;
width: 83px;
background-color: #3FA9F5;
float: left;
margin-right: 697px;
}
/*subnav*/
#subnav {
float:left;
width: 200px;
font-size: 12px;
height: 100px;
margin-top: 20px;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #3CF;
}
#subnav ul{
list-style-type:none;
}
#subnav li a{
padding: 0px;
}
#subnav li a{
text-decoration: none;
font-family: Helvetica;
color: #000;
}
#footer {
clear: both;
height: 20px;
width: 780px;
}
最佳答案
你的 <div id="subnav">...</div>有一个 margin-top: 20px;放
删除它，间隙消失。
编辑；
刚注意到在你的图片上，顶行和子导航之间也有间隙，你可以通过添加 padding-top: 20px; 来实现
关于css - 我的 div 标签不适合，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6547620/