css li重叠了ul菜单

Question

我试图在顶部制作菜单，下拉另一个菜单，但它与顶部的菜单重叠我尝试了绝对值，但子菜单它不见了我认为绝对不会工作，我试过相对它没有工作也好

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

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;

    }

Answer 1

只需在父position:relative上设置li，而不是外ul。 <{1}}没有实际高度，因为所有ul都是浮动的。

li

Answer 2

我认为这一行将解决您的问题

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

DEMO

Answer 3

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

Demo