CSS 下拉菜单 + 平面 UI答案

【问题标题】：CSS Drop Down Menu + FLAT UICSS 下拉菜单 + 平面 UI
【发布时间】：2014-01-06 03:08:12
【问题描述】：

http://designmodo.github.io/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;
}

【问题讨论】：

转换是通过将不透明度从 0 转换为 1 来实现的。但是如果您使用的是 Flat UI，它不是已经带有内置的下拉菜单了吗？您不必编写这么多自定义代码。

标签： css drop-down-menu menu fadein transitions

【解决方案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>

【讨论】：

解释您更改的内容和原因可能会更有帮助。一个工作示例的链接也很有用。 90 行未注释的代码并不能给出一个非常明确的答案。