У меня проблема с целями в CSS, первое меню и второе меню открыты, но третье меню не отображается. Я использовал max-height и display: none для скрытого. Код похож на второе меню, но не открывается, и я не знаю почему.
Я начал изучать HTML и CSS одну неделю go, и эти темы несколько запутывают .
Спасибо!
.contenedor {
max-width: 1200px;
margin: 0 auto;
}
/** Navegación Responsive **/
.barra {
overflow: hidden;
}
.mobile-menu {
color: black;
font-size: 2rem;
text-align: left;
display: block;
margin-top: 15px;
}
#nav:target {
max-height: 800px;
}
.navegacion-principal {
max-height: 0px;
}
.navegacion-principal ul,
li {
list-style: none;
margin: 0;
padding: 0;
}
.submenu {
display: none;
}
/** Navegacion **/
.navegacion-principal a {
color: black;
text-decoration: none;
font-size: 22px;
display: block;
text-align: left;
padding: 15px;
}
.navegacion-principal a:hover {
background-color: #DB008D;
}
/**submenus */
.subsubmenu li,
.subsubmenu li a {
float: none!important;
}
.fa-angle-right {
float: right;
}
#menu2:target {
display: block;
position: absolute;
margin-top: -60px;
}
#menu3:target {
display: block;
position: absolute;
margin-top: -60px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="styles3.css">
<link rel="stylesheet" href="https://necolas.github.io/normalize.css/8.0.1/normalize.css">
<script src="https://kit.fontawesome.com/1e0df1de19.js" crossorigin="anonymous"></script>
<title>Document</title>
</head>
<body>
<div class="barra">
<div class="baner-menu">
<a href="#nav" class="mobile-menu">
<i class="fas fa-align-left"></i>
</a>
</div>
<nav id="nav" class="navegacion-principal contenedor">
<ul>
<li><a href="#menu2">menu 1</a>
<ul id="menu2" class="submenu">
<li><a href="#nav"><i class="fa fa-angle-left"></i></a></li>
<li><a href="#">menu 2</a></li>
<li><a href="#">menu 2</a></li>
<li><a href="#">menu 2</a></li>
<li><a href="#menu3">menu 2<i class="fas fa-angle-right"></i></a>
<ul id="menu3" class="submenu">
<li><a href="#">menu 3</a></li>
<li><a href="#">menu 3</a></li>
<li><a href="#">menu 3</a></li>
</ul>
</li>
</ul>
</li>
</nav>
</div>
</body>
</html>