HTML/CSS子菜单不可见

HTML/CSS子菜单不可见,html,css,drop-down-menu,Html,Css,Drop Down Menu,我正在制作一个页面,其中应该有一个子菜单。在我的页面中,我将其分为3类(页眉、内容、页脚)。我总是在标题中插入菜单和子菜单,我首先在test.html文件中测试了它,然而,当我在主页中应用它时,内容似乎与子菜单重叠 你们知道我怎么解决这个问题吗 这是我常用的模板(没有子菜单,工作正常) 只需将溢出:隐藏添加到此处: #菜单{ 保证金:0; 填充:0; 溢出:隐藏; } Bin:溢出:隐藏在css上应该可以修复它。这样它就不会超出您定义的范围 在我上面的问题中,在搜索了这么多论坛之后,这一个对我

我正在制作一个页面,其中应该有一个子菜单。在我的页面中,我将其分为3类(页眉、内容、页脚)。我总是在标题中插入菜单和子菜单,我首先在test.html文件中测试了它,然而,当我在主页中应用它时,内容似乎与子菜单重叠

你们知道我怎么解决这个问题吗

这是我常用的模板(没有子菜单,工作正常)


只需将溢出:隐藏添加到此处:

#菜单{
保证金:0;
填充:0;
溢出:隐藏;
}

Bin:

溢出:隐藏在css上应该可以修复它。这样它就不会超出您定义的范围

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

position:relative;
是的,它成功了:)

这是前面发生的情况,然后添加position:relative on#content以查看修复


我试过了,但还是不让我看,我试着发一张图片来提问clear@MisaChan看看垃圾箱,它能用。这是一个活生生的例子。你能看到它吗?这是一个奇怪的想法,像这样出现,有没有一种方法我可以发布一张图片给你看?我在问题上加了它。我刚刚添加了您所说的内容,但仍然无法查看子菜单。我想内容被屏蔽了。我试过垃圾箱,它也没有显示下拉列表。这和我的答案有什么不同?溢出:隐藏只会继续不显示我需要的内容,我在垃圾箱上测试了它,但它不起作用!我把它取了下来,效果很好
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;
}
position:relative;