css li накладывается на ul menu

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. ul не имеет фактической высоты, потому что все li с плавают.

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

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

Answer 2

Вы можете исправить это, если добавить: top: 30px; в свое подменю.

Demo

Answer 3

Я думаю, что эта линия будет решить вашу проблему

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

DEMO