Question

Chrome和转换似乎存在绝对位置问题。我正在使用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版本以来，它似乎已经解决了一个问题，但对于这段代码来说，它似乎根本没有。

由于

Answer 1

这是你的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;
}

使用chrome定位绝对和过渡

1 个答案: