看来 Chrome 和 transition 的绝对位置有问题。我正在使用 Chrome 36.0 进行测试。它适用于最新的 Firefox 和最新的 IE。 问题是当我将鼠标指针移到 Categorias 元素菜单上时无法查看子菜单。 代码:
<!DOCTYPE html>
<html>
<head lang='es'>
<meta charset='UTF-8'>
<title>Menú Desplegable</title>
<link rel='stylesheet' href='css/styles.css' />
<link rel='stylesheet' href='css/fonts.css' />
</head>
<body>
<header>
<nav>
<ul>
<li><a href='#'><span class='primero'><i class='icon icon-house'></i></span>Inicio</a></li>
<li><a href='#'><span class='segundo'><i class='icon icon-tag'></i></span>Categorías</a>
<ul>
<li><a href='#'>Item#1</a></li>
<li><a href='#'>Item#2</a></li>
<li><a href='#'>Item#3</a></li>
<li><a href='#'>Item#4</a></li>
<li><a href='#'>Item#5</a></li>
</ul>
</li>
<li><a href='#'><span class='tercero'><i class='icon icon-suitcase'></i></span>Servicios</a></li>
<li><a href='#'><span class='cuarto'><i class='icon icon-newspaper'></i></span>Acerca De</a></li>
<li><a href='#'><span class='quinto'><i class='icon icon-mail'></i></span>Contacto</a></li>
</ul>
</nav>
</header>
</body>
</html>
以及 CSS 代码:
* {
padding: 0;
margin: 0 auto;
}
header {
width: 100%;
}
a {
text-decoration: none;
}
nav {
margin: 20px auto;
width: 90%;
max-width: 1000px;
}
nav ul {
list-style: none;
}
nav > ul {
display: table;
overflow: hidden;
width: 100%;
background: black;
position: relative;
}
nav > ul li {
display: table-cell;
}
/*Sub-menu*/
nav > ul > li:hover > ul {
display: block;
height: 100%;
}
nav > ul > li > ul {
display: block;
position: absolute;
background: black;
left: 0;
right: 0;
overflow: hidden;
height: 0;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
nav > ul li a {
color: white;
display: block;
line-height: 20px;
padding: 20px;
position: relative;
text-align: center;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
nav > ul > li > ul > li a:hover {
background: #5da5a2;
}
nav > ul > li > a span {
background: #174459;
display: block;
height: 100%;
width: 100%;
left: 0;
position: absolute;
top: -55px;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
nav > ul > li > a span .icon {
display: block;
line-height: 60px;
}
nav > ul > li > a:hover > span {
top: 0;
}
/*Colores*/
nav ul li a .primero {
background: #0e5061;
}
nav ul li a .segundo {
background: #5da5a2;
}
nav ul li a .tercero {
background: #f25724;
}
nav ul li a .cuarto {
background: #174459;
}
nav ul li a .quinto {
background: #37a4d9;
}
问题似乎出在这部分:
nav > ul > li > ul {
display: block;
position: absolute;
如果我将位置更改为相对位置，那么当我通过鼠标指针时它会出现子菜单。 我一直在互联网上阅读相关内容，似乎自 16 或 18 Chrome 版本以来就解决了一个错误，但对于这段代码似乎根本没有解决。
谢谢
最佳答案
这是对你的菜单 css 的修复，所以现在可以工作了:
* {
padding: 0;
margin: 0 auto;
}
header {
margin-top:10px;
width: 100%;
overflow: hidden;
height: 150px;
position: relative;
}
a {
text-decoration: none;
}
nav {
top:-20px;
margin: 20px auto;
width: 90%;
max-width: 1000px;
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
}
nav ul {
list-style: none;
}
nav > ul {
display: table;
width: 100%;
background: black;
position: relative;
}
nav > ul li {
display: table-cell;
}
/*Sub-menu*/
nav > ul > li:hover > ul {
display: block;
height: 100%;
}
nav > ul > li > ul {
display: block;
position: absolute;
background: black;
left: 0;
right: 0;
overflow: hidden;
height: 0;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
nav > ul li a {
color: white;
display: block;
line-height: 20px;
padding: 20px;
position: relative;
text-align: center;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
nav > ul > li > ul > li a:hover {
background: #5da5a2;
}
nav > ul > li > a span {
background: #174459;
display: block;
height: 100%;
width: 100%;
left: 0;
position: absolute;
top: -55px;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
nav > ul > li > a span .icon {
display: block;
line-height: 60px;
}
nav > ul > li > a:hover > span {
top: 0;
}
/*Colores*/
nav ul li a .primero {
background: #0e5061;
}
nav ul li a .segundo {
background: #5da5a2;
}
nav ul li a .tercero {
background: #f25724;
}
nav ul li a .cuarto {
background: #174459;
}
nav ul li a .quinto {
background: #37a4d9;
}
关于html - 绝对定位和 chrome 过渡，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24915869/