Question

我正在制作一个应该有子菜单的页面。在我的页面中，我将其分为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;
}

Answer 1

只需将overflow: hidden添加到此处：

#menu {
  margin:0;
  padding:0;
  overflow: hidden;
}

Bin：http://jsbin.com/mezilowiva/edit?css,output

Answer 2

溢出：隐藏在你的CSS上应该修复它。这样它就不会超越你所定义的内容。

Answer 3

在我上面的问题中，在搜索了这么多论坛之后，这一个对我起了作用。我已经知道这是阻止我下拉的内容，因为当我移动ul时，你可以看到文本，我也进行了一些调整。然后当我的下拉出现时，我无法点击点击内容部分的子菜单。在一个论坛（谈论不透明，我现在遇到的另一个问题），它说当有2个div，它会影响一切，纠正我，如果我错了xD那就是我读过的，那么好，他们说他们说这个在内容页面上，所以我添加了这行代码

position:relative;

是的，它有效:)

这是先前发生的事情，然后在#content上添加position：relative来查看修复

https://jsbin.com/zulese/1/edit?html,css,output

HTML / CSS子菜单不可见

3 个答案: