Абсолютное положение и переход с хромом

Вопрос:

кажется, что у Chrome и перехода есть проблема с абсолютной позицией. Я тестирую Chrome 36.0. Он отлично работает с последним Firefox и последним IE. Проблема в том, что я не могу просмотреть подменю, когда передаю указатель мыши над меню элементов “Категории”. Код:

<!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;
}

Оцените статью
TechArks.Ru
Добавить комментарий