Я пытаюсь создать сайт, и мне нужно многоуровневое подменю.Сейчас я сталкиваюсь с двумя проблемами:
Я не знаю, как правильно разместить подменю.Оно должно появиться рядом с подменю на той же высоте, что и предыдущий пункт меню, и отобразить список вниз.
Я не знаю, как установить, что подменю расширяется, только если янаведите курсор на соответствующий пункт подменю.Код, который я использую, прилагается ниже.
Буду признателен, если будет изменен только CSS, потому что сайт работает с программой, которая создает HTML Код здесь: https://jsfiddle.net/TheBB23/Luxrakzq/
body {
margin: 0;
padding: 0;
background: #ccc;
color: #00782E;
font-family: Arial, Helvetica, sans-serif;
}
/* Header Leiste */
.nav{
width: 100%;
height: 70px;
background: #00782E;
position: fixed;
z-index: 2;
}
/* Hintergrund für Obermenüpunkte */
.nav ul {
width: 60%;
height: 70px;
list-style: none;
background: none;
text-align: center;
padding: 0;
margin-top: 0px;
margin-left: 25%;
margin-right: 15%;
position: fixed;
}
/* Position Menüoberpunkte */
.nav li {
line-height: 20px;
display: inline-block;
}
/* Style Menüoberpunkte */
.nav a{
text-decoration: none;
color: white;
width: auto;
display: block;
padding-top: 25px;
padding-right: 10px;
padding-left: 10px;
padding-bottom: 5px;
font-size: 20px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}
.menulist {
display: none;
}
dropdown-content ul {
display: none;
}
/* Untermenü bei Hovern anzeigen*/
.dropdown:hover .menulist.menulist{
display: block;
margin-left: 0;
text-align: left;
width: 200px;
height: auto;
padding-top: 6px;
padding-bottom: 6px;
list-style: none;
margin-right: 0;
position: fixed;
background: white;
}
.menulist .menulist {
background-color: red !important;
width: 280px !important;
}
.dropdown:hover .dropdown-content ul ul {
display: none;
}
.menulist ul:hover .dropdown-content ul ul {
display: block !important;
}
/* Untermenüpunkte erster Ordnung Style*/
.menulist a {
color: #00782E;
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
line-height: 12px;
font-weight: 500;
width: 150px;
padding-left: 16px;
padding-top: 10px;
padding-bottom: 10px;
text-decoration: none;
display: block;
text-align: left;
}
.menulist .menulist a {
font-size: 15px;
padding-top: 6px,
padding-bottom: 6px;
margin-right: 0px;
padding-right: 0px;
padding-left: 6px;
}
/* Abstand Untermenütext 1 zum Kasten */
.menulevel1 {
margin-left: 6px;
}
/* Untermenüpunkte 2. Ordnung Style */
.dropdown-menu a {
color: #00782E;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 12px;
font-weight: 500;
width: 150px;
padding-left: 16px;
padding-top: 1px;
padding-bottom: 1px;
text-decoration: none;
display: block;
text-align: left;
}
li a:hover, .dropdown:hover .dropbtn {
color: lightgrey !important;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class ="nav">
<ul>
<li class="dropdown">
<a href="animals" class="dropbtn">Animals</a>
<div class = "dropdown-content">
<ul class="menulist">
<li class="menulevel1">
<a class=" " href="lion">Lion</a>
</li>
<li class="menulevel1">
<a class=" " href="cat">cat</a>
</li>
<li class="menulevel1">
<a class=" " href="monkey">monkey</a>
</li>
<li class="menulevel1">
<a class=" " href="cow">cow</a>
</li>
<li class="menulevel1">
<a class=" " href="sheep">sheep</a>
</li>
<li class="menulevel1">
<a class=" " href="rat">rat</a>
</li>
</ul>
</div>
</li>
<li class="dropdown">
<a href="names" class="dropbtn">names</a>
<div class = "dropdown-content">
<ul class="menulist">
<li class="menulevel1">
<a class=" " href="Pete">Pete</a>
</li>
<li class="menulevel1">
<a class=" " href="Finley">Finley</a>
</li>
<li class="menulevel1">
<a class=" " href="#">Jordan <span class="Jordan"></span></a>
<ul class="menulist">
<li class="menulevel2">
<a class=" " href="calvin">Calvin</a>
<li class="menulevel2">
<a class=" " href="harry">harry</a>
</li>
</ul>
</li>
<li class="menulevel1">
<a class=" " href="george">george</a>
</li>
</ul>
</div>
</li>
</ul>
</body>
</html>
Спасибо за помощь