CSS下拉菜单转换
问题描述：
我想为我正在处理的菜单添加下拉式转换，但似乎我不知道我做错了什么。菜单本身立即出现，忽略了过渡效果。CSS下拉菜单转换
CSS代码，我使用的过渡：
-webkit-transition: height 0.3s ease-in;
-moz-transition: height 0.3s ease-in;
-o-transition: height 0.3s ease-in;
-ms-transition: height 0.3s ease-in;
transition: height 0.3s ease-in;
opacity:0;
据我知道我应该把它添加到nav ul ul CSS块，并添加opacity:1到nav ul li:hover > ul，但它不工作。
这里是整个菜单的代码。
HTML
<nav>
<ul>
<li><a href="http://www.www.com/">Menu 1</a></li>
<li><a href="http://www.www.com/">Menu 2</a></li>
<li><a>Dropdown Here</a>
<ul>
<li><a href="http://www.www.com/">Dropdown1</a></li>
<li><a href="http://www.www.com/">Dropdown2</a></li>
<li><a href="http://www.www.com/">Dropdown3</a></li>
</ul>
</li>
<li><a href="http://www.www.com/">Menu 4</a></li>
<li><a href="http://www.www.com/">Menu 5</a></li>
</ul>
</nav>
而CSS我使用
nav ul {
background: #efefef;
background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);
background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%);
background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%);
box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
padding: 0 25px;
border-radius: 10px;
list-style: none;
position: relative;
display: inline-table;
float:right;
z-index:9999;
}
nav ul ul {
display: none;
-webkit-transition: height 0.3s ease-in;
-moz-transition: height 0.3s ease-in;
-o-transition: height 0.3s ease-in;
-ms-transition: height 0.3s ease-in;
transition: height 0.3s ease-in;
opacity:0;
}
nav ul li:hover > ul {
display: block;
opacity:1;
}
nav ul:after {
content: "";
clear: both;
display: block;
}
nav ul li {
float: left;
}
nav ul li:hover {
background: #4b545f;
background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
}
nav ul li:hover a {
color: #fff;
}
nav ul li a {
display: block;
padding: 30px 20px;
color: #757575;
text-decoration: none;
}
nav ul ul {
background: #5f6975;
border-radius: 0px;
padding: 0;
position: absolute;
top: 100%;
}
nav ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}
nav ul ul li a {
padding: 15px 40px;
color: #fff;
}
nav ul ul li a:hover {
background: #4b545f;
}
nav ul ul ul {
position: absolute; left: 100%; top:0;
}
答
你只是过渡高度，从而使需要改变的悬停元素的高度。
transition: height 0.3s ease-in;
^^^^^^
现在悬停CSS正在改变透明度和显示性能，请参见：
nav ul li:hover > ul {
display: block;
opacity:1;
}
所以，你要转换的任何属性需要在过渡语句被引用。您可以使用“全部”，以便快速的方式来抓住所有的更改属性：
transition: all 0.3s ease-in;
还要注意的是display不超过可转移的属性。要隐藏你的ul，你可以给它0，然后在悬停的特定高度。
答
您的转换不会触发，因为您的元素的height在:hover期间没有更改，只有display和opacity。为了让您的元素淡入 - 您需要将您的过渡属性更改为opacity或all。
如果您想要转换高度 - 您需要将元素height设置为0，然后在:hover上更改它。
请注意虽然 - 高度转换仅适用于指定的height值，并且不适用于类似height: auto;之类的东西。没有为这一个解决办法，如下：
ul {
transition: all 0.5s;
max-height: 0;
}
ul:hover {
max-height: 200px; //or whatever could be your max-height value - don't overdo it, will be crappy transition.
}
答
试试这个 步骤1. 让我们建立了我们的HTML。我们将把我们的菜单放入一个标题中，并且我们还将在标题下创建一个“内容”区域。
有点解释： 这部分过程解决了IE的堆叠顺序，并且确保我们的菜单不会在内容区域后面呈现，这是我经常见到的问题。一个典型的场景是在头部下面有一些图像滚动条，这要求滚动条容器具有相对位置，并使菜单在IE中的滚动条后面呈现。为了解决这个问题，我们的Header必须有position：static。
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>CSS3 Horizontal sliding menu</title>
<style>
.header{
width: 600px;
height:50px;
border:1px dotted grey;
}
.content{
position:relative;
width: 600px;
height:500px;
color:white;
background-color: #e6056f;
overflow:hidden;
}
.item{
position:absolute;
top:50px;
left:20px;
width: 600px;
height:400px;
background-color: grey;
}
</style>
<body>
<div class="header">
<div class="navigation">
</div>
</div>
<div class="content">
<div class="item">
</div>
</div>
</body>
</html>
步骤2. 我们将使用一个无序列表创建菜单结构，并将其放置在导航DIV中： （请确保您替换＃的实际联系，例如：变）
<ul>
<li><a href="#">Main - 1</a>
<ul>
<li><a href="#">Level 2 - 1</a></li>
<li><a href="#">Level 2 - 2</a></li>
<li><a href="#">Level 2 - 3</a></li>
<li><a href="#">Level 2 - 4</a></li>
</ul>
</li>
<li><a href="#">Main - 2</a>
<ul>
<li>
<ul>
<li><a href="#">Level 3 - 1</a></li>
<li><a href="#">Level 3 - 2</a></li>
<li><a href="#">Level 3 - 3</a></li>
<li><a href="#">Level 3 - 4</a></li>
<li><a href="#">Level 3 - 5</a></li>
</ul>
<a href="#">Level 2 - 1</a>
</li>
<li>
<ul>
<li><a href="#">Level 3 - 1</a></li>
<li><a href="#">Level 3 - 2</a></li>
<li><a href="#">Level 3 - 3</a></li>
<li><a href="#">Level 3 - 4</a></li>
<li><a href="#">Level 3 - 5</a></li>
</ul>
<a href="#">Level 2 - 2</a></li>
<li>
<ul>
<li><a href="#">Level 3 - 1</a></li>
<li><a href="#">Level 3 - 2</a></li>
<li><a href="#">Level 3 - 3</a></li>
<li><a href="#">Level 3 - 4</a></li>
<li><a href="#">Level 3 - 5</a></li>
</ul>
<a href="#">Level 2 - 3</a></li>
<li><a href="#">Level 2 - 4</a></li>
</ul>
</li>
<li><a href="#">Main - 3</a></li>
<li><a href="#">Main - 4</a></li>
</ul>
步骤3. 要定位菜单水平，我们将使用float：留在菜单项和几个基本款式，使其像样：
.navigation {
width:600px;
}
.navigation ul{
/* positioning */
position:relative;
z-index:1000;
/* remove the dots next to list items: */
list-style:none;
/* get rid of any default or inherited margins and padding: */
margin:0;
padding:0;
/* styling: */
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-weight: normal;
font-size: 15px;
}
/* we're using the direct descendant selectors > to ONLY affect the main menu items */
.navigation > ul > li {
/* positioning */
position: relative;
float: left;
/* styling: */
margin-right: 10px;
}
.navigation > ul > li > a {
/* positioning */
display:block;
/* styling: */
background-color: #2c2c2c; /* grey */
padding:8px 14px;
text-decoration:none;
color:#aaaaaa;
}
.navigation > ul > li > a:hover{
/* styling: */
background-color:#666666; /* grey */
color:#eeeeee; /* light grey */
}
第4步。 下拉框。我们打算将相同样式应用于二级和三级下拉菜单，但您可以选择添加其他样式以区分它们。
.navigation ul ul{
background-color:#e6056f; /* remove. this is for illustration purposes only */
width:340px; /* you need a width to accommodate tertiary menus */
position:absolute;
z-index:100;
height: 0;
overflow: hidden;
}
/* don't display tertiary box yet */
.navigation > ul > li:hover ul ul, .navigation > ul > li > a:hover ul ul{
height:0;
}
/* tertiary drop-down box */
.navigation ul ul ul{
left:170px;
width:170px;
}
.navigation > ul > li:hover ul, .navigation > ul > li > a:hover ul,
.navigation ul ul li:hover > ul, .navigation ul ul li a:hover > ul{
height:220px; /* need a height to accommodate any tertiary menus */
}
/* drop-down item styles */
/* if you want different styling for tertiary menus, just copy the 4 rules below and insert an additional ul: for example: ".navigation ul ul li", becomes: ".navigation ul ul ul li" */
.navigation ul ul li{
background-color:#eaeaea; /* grey */
width:170px;
}
.navigation ul ul li:hover {
background-color:#999; /* grey */
}
.navigation ul ul li a {
display:block;
text-decoration:none;
margin:0 12px;
padding:5px 0;
color:#4c4c4c; /* grey */
}
.navigation ul ul li a:hover, .navigation ul ul li:hover > a {
color:#ffffff; /* white */
}
第5步 - 可选 我喜欢的菜单项之间的分割线，但之间仅有的菜单项。我不希望它们一直到下拉框的边缘，这意味着更多的CSS调整，但我认为它看起来更好。
通常情况下，我们可以使用：last-child删除列表中的最后一行，但由于IE不能识别：last-child，我们将使用+选择器。以下规则在每个菜单项之间插入行，并确保我们没有任何多余的不需要的行。刚开始的时候有点多毛，但它全面起作用。而且由于线条不会一直延伸到边缘，因此当您将鼠标悬停在项目上时，它也确保没有任何奇怪的空白。
.navigation ul ul ul li a{
border:0 !important;
}
.navigation ul ul ul li + li a{
border-top:1px dotted #999 !important;
}
.navigation ul ul li + li a{
border-top:1px dotted #999;
}
.navigation ul ul li:hover + li a{
border-top:1px solid #eaeaea;
}
.navigation ul ul ul li:hover + li a{
border: 0 !important;
}
.navigation ul ul ul li:hover + li{
border-top:1px solid #999 !important;
}
步骤6. 魔术
所以，现在你应该有一个普通的CSS下拉菜单。让我们添加魔术。 这实际上很简单。
这些属性添加到的.navigation UL UL规则：
-webkit-transition: height 0.3s ease-in;
-moz-transition: height 0.3s ease-in;
-o-transition: height 0.3s ease-in;
-ms-transition: height 0.3s ease-in;
transition: height 0.3s ease-in;
而这些，在UL的.navigation李UL规则：
-webkit-transition: background-color 0.3s ease;
-moz-transition: background-color 0.3s ease;
-o-transition: background-color 0.3s ease;
-ms-transition: background-color 0.3s ease;
transition: background-color 0.3s ease;
步骤7. 还有一两件事，如果你关心IE 7.
为了消除IE 7中菜单项之间的差距，我将在文件顶部添加一些条件语句：
替换这两行
<!DOCTYPE HTML>
<html lang="en">
在你的文件的顶部，这样的：
<!DOCTYPE HTML>
<!--[if lt IE 7 ]> <html class="ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]> <html class="ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]> <html class="ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--> <html lang="en"> <!--<![endif]-->
，并添加此规则的CSS：
/* unfortunate ie7 gap fix */
.ie7 .navigation ul ul li{
margin-bottom:-3px;
}
这就是它！
一个可选的增强： 我要一个小箭头，添加到具有三级菜单中的项目：
做出arrow.png图形，并添加此规则，以你的CSS：
.arrow{background:url(arrow.png) right center no-repeat;}
将箭头类添加到具有三级菜单的链接： 即：级别2 - 1
+0
请不要发布仅限链接的答案，因为如果外部链接消失，它们就没用了。 – Blazemonger
感谢您关于显示的说明。改为使用'visibility'，现在它工作得很好。 –