我正在制作一个应该有子菜单的页面。在我的页面中，我将其分为 3 类(页眉、内容、页脚)。我总是在标题中插入菜单和子菜单，我首先在 test.html 文件中对其进行了测试，但是，当我将其应用于我的主页时，内容似乎与子菜单重叠。
你们知道我该如何解决这个问题吗？
这是我常用的模板(没有子菜单，效果很好)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Sample website</title>
<link href="style.css" rel="stylesheet" />
<!--internal style -->
</head>
<body>
<div id="container">
<header id="header">
<div id="menu" class="menu">
<ul class="menu2">
<li class="child"><a href="index.php" > HOME </a> </li>
<li><a href="#"> ABOUT THE PRODUCT </a>
<ul class="sub">
<li> <a href="#" > PRODUCT </a> </li>
<li> <a href="#" > PRODUCT REVIEWS </a> </li>
</ul>
</li>
<li> <a href="#" > BLOG </a>
<ul>
<li> <a href="#" > ARTICLES </a> </li>
<li> <a href="#" > RECIPES </a> </li>
</ul>
</li>
<li> <a href="#" > ABOUT US </a> </li>
<li> <a href="#" > CONTACT US </a> </li>
</ul>
</div>
</header>
<section id="content">
<h2>Welcome visitor!</h2>
<div id="news">
<center>
<p> insert text here </p>
</center>
</div>
</section>
<footer id="footer">
<div id="fmenu" class="fmenu">
<p>©2015 ALL RIGHTS RESERVED</p>
</footer>
</div>
</div>
</body>
</html>
这是截图
我认为它是我其他东西的 css，所以我会改变它。看这里，我没有使用 css 中的所有内容，它只是我通常使用的模板
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
body {
line-height:1;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
display:block;
}
nav ul {
list-style:none;
}
blockquote, q {
quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content:'';
content:none;
}
a {
margin:0;
padding:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
/* change colours to suit your needs */
ins {
background-color:#ff9;
color:#000;
text-decoration:none;
}
/* change colours to suit your needs */
mark {
background-color:#ff9;
color:#000;
font-style:italic;
font-weight:bold;
}
del {
text-decoration: line-through;
}
abbr[title], dfn[title] {
border-bottom:1px dotted;
cursor:help;
}
table {
border-collapse:collapse;
border-spacing:0;
margin-left: 20px;
margin-top: -25px;
}
/* change border colour to suit your needs */
hr {
display:block;
height:1px;
border:0;
border-top:1px solid #cccccc;
margin:1em 0;
padding:0;
}
input, select {
vertical-align:middle;
}
/* css starts here*/
body {
background: url(images/background.jpg);
font-family: Verdana !important;
font-size: 10pt;
line-height: 20px;
}
#header {
background: url(images/smoothteamLOGO2.jpg) no-repeat;
min-height: 270px;
overflow: hidden;
background-size: 100%;
}
#content {
background: #fff;
float: left;
width: 100%;
}
#container {
width: 826px;
margin: 0 auto;
box-shadow: 0 0 5px 1px #ccc;
}
/* added codes*/
#menu {
margin:0;
padding:0;
overflow: hidden;
}
#menu ul {
padding: 0;
margin-top: 245px;
line-height:30px;
margin-left:35px;
}
#menu li{
margin:0;
padding:0;
list-style:none;
float:left;
position:relative;
}
#menu ul li {
display: inline-block;
}
#menu ul li a {
font-size: 14px;
font-weight: bold;
padding: 1px 14px 0;
margin: 0px;
color: #fff;
text-align:center;
font-family:"Comic Sans MS", cursive;
text-decoration:none;
height:30px;
width:120px;
display:block;
text-shadow:1px 1px 1px #000;
padding-bottom:25px;
}
#menu ul ul{
position:absolute;
visibility:hidden;
top:32px;
}
#menu ul li:hover ul{
visibility:visible;
}
/*******************************/
#menu li:hover{
opacity: 0.6;
filter: alpha(opacity=60);
}
#menu ul li:hover ul li a:hover{
background:#ccc;
color:#000;
}
#menu a:hover{
color:#000;
}
.clearFloat{
clear:both;
margin:0;
padding:0;
}
ul.menu
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
margin-top: -47px;
margin-left: -35px;
font-size: 13px;
}
li.menu
{
display: inline-block;
}
a:link,a:visited
{
text-decoration:none;
}
a:hover,a:active
{
text-decoration: underline;
}
h2 {
text-align: left;
font-size: 25px;
margin-top: 16px;
font-weight: bold;
line-height: 28px;
color: #000;
margin: 10px 10px;
padding: 13px 10px;
}
#content p {
margin: 30px 30px;
}
#footer {
background: url(images/background2.jpg);
min-height: 25px;
background-size: 100%;
clear: both;
}
#fmenu ul {
padding: 0;
margin-top: 120px;
padding-top: 19px;
}
#fmenu ul li {
display: inline-block;
}
#fmenu ul li a {
font-size: 14px;
font-weight: bold;
padding: 1px 14px 0;
margin-top: 0px;
color: #000000;
}
ul.fmenu
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
margin-top: -47px;
margin-left: -35px;
font-size: 13px;
}
li.fmenu
{
display: inline-block;
color:: black;
}
#footer p {
margin-top: 10px;
margin-left: 209px;
display: inline;
width: 850px;
font-size: 11px;
color: #fff;
}
#signup form{
width: 400px;
}
#signup form ul{
list-style-type: none;
margin-left: 20px;
}
#signup ul li{
margin: 15px, 0;
}
#signup form label{
display: block;
}
#signup form input, textarea, select{
padding: 5px;
border: #ccc 3px solid;
width: 100%;
}
#news ul li{
list-style-type:none;
margin-left: 30px;
}
最佳答案
只需在此处添加overflow: hidden即可:
#menu {
margin:0;
padding:0;
overflow: hidden;
}
关于HTML/CSS 子菜单不可见，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32719679/