2014-04-13 5 views
0

У меня есть эта строка меню: http://jsfiddle.net/PtQAP/ , и мне нужно поместить его в нижнюю часть, а выпадающее меню - в раскрывающееся меню. Как я могу это сделать?Как изменить выпадающее меню на выпадающее меню

CSS:

ul, li, a { 
    margin: 0; 
    padding: 0; 
} 
li { 
    list-style: none; 
} 
a { 
    text-decoration: none; 
    color: #000000; 
} 

ul > li { 
    float: left; 
} 
ul > li a { 
    color: #fff; 
    font-weight: bold; 
    line-height: 40px; 
    height:40px; 
    display:block; 
    padding:0px 10px; 
} 
ul li a:hover { 
    background: #666666; 
} 
ul li ul { 
    display: none; 
    position: absolute; 
    background: #333333; 
} 
ul li ul li { 
    float: none; 
    line-height: 40px; 
    height: 40px; 
} 

Спасибо за ответы.

+0

возможным дублировать [раскрывающееся меню, которое открывается вверх/вверх с помощью PURE CSS] (http://stackoverflow.com/questions/7814186/drop-down-menu-that-opens-up-upward-with-pure-css) – chris97ong

ответ

3

дают планку position из fixed, и установить его bottom в 0px, а затем установить меню, чтобы иметь bottom высоты вашего бара, в этом случае 40px

div { 
    background: #999999; 
    height: 40px; 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 15px; 
    color: #000000; 
    margin: -8px; 
    width:100%; 
    position:fixed; 
    bottom:0px; 
    left:0px; 
} 

ul li ul { 
    display: none; 
    position: absolute; 
    background: #333333; 
    bottom:40px; 
} 

JSFiddle Demo

Смежные вопросы