Convert a CSS drop down menu in a drop up menu

Question

I would like to convert my drop down menu to a drop up menu. I have searched information on the internet, but it didn't help.

My css code:

#nav
{
margin: 0px;
padding: 0px;
position: absolute;
top: 18px;
display: block;
left: 313px;
}

#nav > li
{
list-style-type:none;
float:left;
display:block;
margin:0px 10px;
position:relative;
padding:10px;
width:100px;
}

#nav > li:hover ul
{
display:block;
}

#nav > li:hover
{
-moz-border-radius:10px;
-webkit-border-radius:10px;
}

#nav li ul
{
margin:0px;
padding:0px;
display:none;
}

#nav li ul li
{
list-style-type:none;
margin:10px 0 0 0;
}

#nav li ul li a
{
display:block;
padding:5px 10px;
color:#bdb49f;
text-decoration:none;
}

#nav li ul li:hover a
{
color:#b15815;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}

#nav li span
{
cursor:pointer;
margin:0px 10px;
font-weight:bold;
}

possible duplicate of [Drop-down menu that opens UP/upward with PURE CSS](http://stackoverflow.com/questions/7814186/drop-down-menu-that-opens-up-upward-with-pure-css) — Skippy le Grand Gourou, Feb 16 '15 at 12:42

BenPog · Accepted Answer · 2014-01-30T16:30:40.263

The solution lies in making child ul absolutely positioned.

Here is a working example : http://jsfiddle.net/3NmRP/

The "margin-top" on "#nav" is just here for the sake of example, you can remove it.

#nav{
    margin: 0px; padding: 0px; position: absolute; top: 18px; display: block; left: 313px;
}

#nav > li {
    list-style-type:none;
    float:left; display:block;
    margin:0px 10px;
    position:relative;
    padding:10px;
    width:100px;
}
#nav > li ul {
    position:absolute;
    bottom: 100%;
}
#nav li:hover > ul {
    display:block;
}
#nav > li:hover{
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
}
#nav li ul{
    margin:0px;
    padding:0px;
    display:none;
}
#nav li ul li{
    list-style-type:none;
    margin:10px 0 0 0;
}
#nav li ul li a{
    display:block;
    padding:5px 10px;
    color:#bdb49f;
    text-decoration:none;
 }
#nav li ul li:hover a {
    color:#b15815;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
}
#nav li span{
    cursor:pointer;
    margin:0px 10px;
    font-weight:bold;
}

#nav {
    margin-top: 100px;
}

Convert a CSS drop down menu in a drop up menu

1 Answers1