У меня есть упражнение меню с подуровнем, в котором у меня есть следующая проблема:
Я пытался настроить его с помощью процентов, но, очевидно, у меня есть следующие недостатки:
Я оставляю пример кода, который я пробовал, где вы можете даже заметить использование процента, который я упомянул.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Ejercicio</title>
<style>
nav > ul {
display: flex;
padding: 0;
}
ul > li {
flex: auto;
list-style: none;
background: tomato;
text-align: center;
}
li > ul {
display: none;
}
nav ul > li:nth-child(n+1):hover .submenu{
display: block;
cursor: pointer;
position: fixed;
padding: 0px;
min-width: 30%;
}
</style>
</head>
<body>
<nav>
<ul>
<li>Elemento 1</li>
<li>
Elemento 2
<ul class="submenu">
<li>elementos 1</li>
</ul>
</li>
<li>Elemento 3</li>
</ul>
</nav>
</body>
</html>
у Твоего c¦digo есть фундаментальная ошибка и дело в том, что ты использовал свойство fixed
вместо свойства absolute
.
raz¦n из этого состоит в том, что свойство fixed
бросает якорь в окно и не в элементы añadidos.
nav > ul {
display: flex;
padding: 0;
}
ul > li {
flex: auto;
/*
Añadimos el position:relative para contener el elemento absolute
*/
position:relative
list-style: none;
background: tomato;
text-align: center;
}
li > ul {
display: none;
}
nav ul > li:nth-child(n+1):hover .submenu{
display: block;
cursor: pointer;
/*
Cambiamos el fixed por absolute
*/
position: absolute;
/*
Añadimos el width:100% esto cojera todo el ancho del padre que lo contiene
para contener un elemento absolute se requiere que el padre tenga un position:relative
*/
width:100%
padding: 0px;
min-width: 30%;
}