CODEWITHSUNDEEP
htmlcss
rodolfo navalon
rodolfo navalon

Reputation: 193

css li overlap the ul menu

I was trying to make menu at the top that drops down another menu it works but it overlap the menu at the top I tried absolute value but the submenu it gone I think absolute wont work and i tried relative it didnt work as well.

what is the best way to fix this?

http://jsfiddle.net/TBEnf/ Here is the Jfiddle demo

enter image description here

enter image description here

Here is my code

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

    }

Upvotes: 2

Views: 2071

Answers (3)

AhmetEmre90
AhmetEmre90

Reputation: 501

I think this line will solve your problem 

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

DEMO

Upvotes: 1

DarkAjax
DarkAjax

Reputation: 16223

You can fix this if you add: top: 30px; to your submenu.

Demo

Upvotes: 0

js1568
js1568

Reputation: 7032

Just set position:relative on the parent li instead of the outer ul. The ul doesn't have an actual height because all the lis are floated.

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

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

Upvotes: 1

Related Questions