CODEWITHSUNDEEP
cssmenuposition
sn00p
sn00p

Reputation: 1

Drop down position

Having some problems getting the drop down menu position or mainly the background of it in place with the links from drop down menu, can't figure out what could be the problem... Here's the CSS code (menu li ul) image on how it looks -> https://i.sstatic.net/aWMOh.jpg or jsFiddle http://jsfiddle.net/F5wCG/3/

.menu ul{
background-color: transparent;
height: 25px;
list-style: none;
margin: 0;
padding: 0;
position: relative;
clear: left;
float: right;
text-align: center;
right: 50%;

}
.menu li{
    float: left;
    padding: 0px;
    position: relative;
    left: 50%;
    margin: 0px;
    list-style: none;
    }

.menu li a{ /* Where main link names are etc */
    background: #333 url("images/seperator.gif") bottom right no-repeat;
    color: #CCC;
    display: block;
    font-weight: normal;
    line-height: 35px;
    margin: 0px;
    padding: 0px 25px;
    text-align: center;
    text-decoration: none;
    }

    .menu li a:hover, .menu ul li:hover a{
        background-color: #2580A2;
        background-image: url('images/hover.gif');
        background-position: bottom center;
        background-repeat: no-repeat;
        color:#FFFFFF;
        text-decoration:none;
        }

.menu li ul{ /* Drop down menu */
    background-color: #333;
    display: none;
    height: auto;
    border: 0px;
    position: absolute;
    width: 225px;
    z-index: 200;
    padding: 0px;
    margin: 0px;
    border: 0px;
    }

.menu li:hover ul{
    display: block;
    }

.menu li li {
    background: url('images/sub_sep.gif') bottom left no-repeat;
    display: block;
    float: none;
    width: 220px;
    }

.menu li:hover li a{
    background: none;

    }

.menu li ul a{
    display: block;
    height: 35px;
    font-size: 12px;
    font-style: normal;
    margin: 0px;
    padding: 0px 10px 0px 15px;
    text-align: left;
    }

    .menu li ul a:hover, .menu li ul li:hover a{
        background: #2580A2;
        background-image: url(images/hover_sub.gif);
        background-position: center left;
        background-repeat: no-repeat;
        border: 0px;
        color: #FFF;
        text-decoration: none;
        }

.menu p{
    clear: left;
    }

Upvotes: 0

Views: 286

Answers (1)

worenga
worenga

Reputation: 5856

http://jsfiddle.net/F5wCG/4/

Basically remove .menu li { left: 50% } and add .menu li a {left:0; }

Upvotes: 1

Related Questions