2

我试图在顶部制作菜单，该菜单会下拉另一个菜单，但它与顶部的菜单重叠我尝试了绝对值，但它消失的子菜单我认为绝对不起作用，我尝试了相对它也不起作用。

解决此问题的最佳方法是什么？

http://jsfiddle.net/TBEnf/这里是 Jfiddle 演示

在此处输入图像描述

在此处输入图像描述

这是我的代码

<style>
.midbox {
    margin:0px auto;
    width:900px;
    height:1000px;
    background:#c0d8d8;
    border-radius:10px;
    box-shadow: 10px 10px 10px #969696;
}
.headerprofile {
    width:900px;
    height:30px;
    background-color:skyblue;
    border-top-left-radius:10px;
    border-top-right-radius:10px;
    box-shadow:0 1px -2px #70badb
}


    .headerprofile .ULlist ul li:hover > ul{
     display:block;
    }
    .headerprofile .ULlist ul ul li a {
        padding:     15px;     
        position:relative;
    }
    .headerprofile .ULlist ul ul li {
       float: none; 
    border-top: 1px solid #6b727c;
    border-bottom: 1px solid #575f6a;
    position: relative;

    }
    .headerprofile .ULlist ul ul {
        display: none;

    background: #5f6975; border-radius: 0px; padding: 0;
position: absolute; top: 100%;

    }
    .headerprofile .ULlist ul {
        position:relative;
        list-style:none;
        padding:0 10px;
    }

        .headerprofile .ULlist ul li {
            float:left;
        }

    .headerprofile .ULlist ul li a{

    display: block; padding: 6px 10px;
    color: #757575; text-decoration: none;

    }

4

3 回答 3

1

只需position:relative在 parentli而不是external 上设置ul。ul没有实际高度，因为所有sli都是浮动的。

.headerprofile .ULlist ul {
    list-style:none;
    padding:0 10px;
}

    .headerprofile .ULlist ul li {
        float:left;
        position:relative;
    }
于 2013-04-08T20:09:16.810 回答
1

我认为这条线会解决你的问题 

headerprofile .ULlist ul li:hover > ul
{
    display:block;
    margin-top:30px;  /* add this line to your css*/
}

演示

于 2013-04-08T20:09:21.437 回答
0

如果您将：添加top: 30px;到您的子菜单，则可以解决此问题。

演示

于 2013-04-08T20:09:20.353 回答