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菜單

回答

相關問題