css李重叠ul菜单

我正在尝试使顶部的菜单下降另一个菜单的作品，但它重叠顶部的菜单我想绝对值，但子菜单它走了我认为绝对不会工作，我试过了相对它没有工作。css李重叠ul菜单

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

enter image description here

这里是我的代码

<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; 

    }

来源

2013-04-08 rodolfo navalon

请发表您的HTML和创建的jsfiddle或jsbin演示。 – 2013-04-08 19:57:13

刚刚成立position:relative父li而不是外部ul。 ul没有实际高度，因为所有li都是浮动的。

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

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

来源

2013-04-08 20:09:16 js1568

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

Demo

来源

2013-04-08 20:09:20 DarkAjax

我觉得这个行会解决你的问题

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

DEMO

来源

2013-04-08 20:09:21 AhmetEmre90

css李重叠ul菜单

回答

相关问题