Clever Geek Handbook

Dropdown placement and placement width

I have a problem with the About dropdown menu: http://pamperland.net/selindobeta/

I would like the child links to be about 120px wide and have different background colors than their parent. Somehow I added these properties and this is what I get. The parent link doubles in size and slides down; child links do not have the specified color properties.

+3


source to share


3 answers


try it



ul li:hover > ul {
    display: block;
    position: absolute;
    right: 630px;
    top: 136px;
    width: 100px;
}
+3


source


the background changes, since the first tag in li is also selected, you should write:

li:hover ul a
    {
       background: #2f3036;
       color: #fff;
    }

int



li:hover a

and double size is due to floating, just use display: block, instead:

li > ul li {
    display: block;
    float: none;
}
0


source


TRY IT

ul li:hover > ul{
    position: absolute; <-- Added
    top: 40px;
}
ul > li{
    position: relative;
}
li > ul > li{
    position: static;
}
0


source






More articles:


All Articles