CSS выпадающего меню + FLAT UI

http://designmodo.github.io/Flat-UI/CSS выпадающего меню + FLAT UI

Я хотел создать Css выпадающее меню, у меня есть выпадающая часть сделана, но я не могу показаться, чтобы эмулировать переходы и не имею ни малейшего представления о том, как код те. Вот что я до сих пор, заблаговременно за вашу помощь.

body { 
font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif; 
padding: 20px 50px 150px; 
font-size: 13px; 
text-align: center; 
background: #E3CAA1;

}

ul { 
text-align: left; 
    display: inline; 
    margin: 0; 
    padding: 15px 4px 17px 0; 
    list-style: none; 
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); 
    -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); 
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); 
    } 
    ul li { 
    font: bold 12px/18px sans-serif; 
    display: inline-block; 
    margin-right: -4px; 
    position: relative; 
    padding: 15px 20px; 
    background: #fff; 
    cursor: pointer; 
    -webkit-transition: all 0.2s; 
    -moz-transition: all 0.2s; 
    -ms-transition: all 0.2s; 
    -o-transition: all 0.2s; 
    transition: all 0.2s; 
    } 
    ul li:hover { 
    background: #555; 
    color: #fff; 
    } 
    ul li ul { 
    padding: 0; 
    position: absolute; 
    top: 48px; 
    left: 0; 
    width: 150px; 
    -webkit-box-shadow: none; 
    -moz-box-shadow: none; 
    box-shadow: none; 
    display: none; 
    opacity: 0; 
    visibility: hidden; 
    -webkit-transiton: opacity 0.2s; 
    -moz-transition: opacity 0.2s; 
    -ms-transition: opacity 0.2s; 
    -o-transition: opacity 0.2s; 
    -transition: opacity 0.2s; 
} 
ul li ul li { 
    background: #555; 
    display: block; 
    color: #fff; 
    text-shadow: 0 -1px 0 #000; 
} 
ul li ul li:hover { background: #666; } 
ul li:hover ul { 
    display: block; 
    opacity: 1; 
    visibility: visible; 
}

источник

2014-01-06 user3164036

Переходы произойти переход непрозрачности от 0 до 1. Но если вы используете плоский интерфейс, не так уже поставляются с встроенными в выпадающие? Вам не нужно писать этот код. –

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<style type="text/css"> 
body { 
font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif; 
padding: 20px 50px 150px; 
font-size: 13px; 
text-align: center; 
background: #E3CAA1;} 
ul { 
text-align: left; 
    display: inline; 
    margin: 0; 
    padding: 15px 4px 17px 0; 
    list-style: none; 
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); 
    -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); 
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); 
    } 
    ul li { 
    font: bold 12px/18px sans-serif; 
    display: inline-block; 
    margin-right: -4px; 
    position: relative; 
    padding: 15px 20px; 
    background: #fff; 
    cursor: pointer; 
    -webkit-transition: all 0.2s; 
    -moz-transition: all 0.2s; 
    -ms-transition: all 0.2s; 
    -o-transition: all 0.2s; 
    transition: all 0.2s; 
    } 
    ul li:hover { 
    background: #555; 
    color: #fff; 
    } 
    ul li ul { 
    padding: 0; 
    position: absolute; 
    top: 48px; 
    left: 0; 
    width: 150px; 
    -webkit-box-shadow: none; 
    -moz-box-shadow: none; 
    box-shadow: none; 
    display: none; 
    opacity: 0; 
    visibility: hidden; 
    -webkit-transiton: opacity 0.2s; 
    -moz-transition: opacity 0.2s; 
    -ms-transition: opacity 0.2s; 
    -o-transition: opacity 0.2s; 
    -transition: opacity 0.2s; 
} 
ul li ul li { 
    background: #555; 
    display: block; 
    color: #fff; 
    text-shadow: 0 -1px 0 #000; 
} 
ul li ul li:hover { background: #666; } 
ul li:hover ul { 
    display: block; 
    opacity: 1; 
    visibility: visible; 
} 
</style> 
</head> 
<body> 

<ul> 
<li>Dropdown menu items</li> 
<li>Dropdown menu items</li> 
<li>Dropdown menu items 
<ul> 
<li>Drop - Dropdown menu items</li> 
<li>Drop - Dropdown menu items</li> 
<li>Drop - Dropdown menu items</li> 
<li>Drop - Dropdown menu items</li> 
</ul> 
</li> 
<li>Dropdown menu items</li> 
<li>Dropdown menu items</li> 
</ul> 

</body> 
</html>

источник

2014-01-06 04:06:49

Возможно, было бы более полезно объяснить, что вы изменили и почему. Полезным будет также ссылка на рабочий пример. 90 строк раскованного кода не дают однозначного ответа. –

ответ

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