Ниже приведен раскрывающийся список, вложенный в раскрывающийся список. первый фрагмент кода работает просто отлично; при наведении курсора на родителя первого раскрывающегося списка происходит переход по высоте, и он отображается так, как я планировал, как и в последующем вложенном раскрывающемся списке.
Проблема со вторым фрагментом ...
* {
margin: 0;
padding: 0;
}
body {
background-color: hsla(33,25%,75%,1);
box-sizing: border-box;
}
.flex-container {
width: 100%;
}
.flex-container a {
background: lightskyblue;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
height: 25px;
padding: 10px;
text-decoration: none;
transition: background-color 500ms, height 500ms, color 500ms;
}
.flex-container a:hover {
background: cornflowerblue;
color: snow;
}
.flex-container li:hover {
box-shadow: 10px 10px 10px black;
}
.flex-container ul {
list-style: none;
display: flex;
}
.flex-container > ul > li {
width: 100%;
position: relative;
}
ul li ul {
flex-direction: column;
position: absolute;
width: 100%;
left: 50%;
}
ul li li {
width: 100%;
top: 0;
height: 0;
overflow: hidden;
transition-duration: 500ms;
}
li:hover > ul > li {
height: 45px;
}
/*
ul li li:hover {
transform: scale(1.1);
}
*/
<!DOCTYPE html>
<html lang="eng">
<head>
<title>Page 2</title>
<meta charser="utf-8">
<link rel="stylesheet" href="styles/styles2.css">
</head>
<body>
<div class="flex-container">
<ul>
<li>
<a href="index.html">Home</a>
<ul>
<li>
<a href="Page2.html">Two</a>
</li>
<li>
<a href="Page2.html">Two</a>
</li>
<li>
<a href="Page2.html">Two</a>
<ul>
<li>
<a href="Page2.html">two</a>
</li>
<li>
<a href="Page2.html">two</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="index.html">Home</a>
</li>
<li>
<a href="index.html">Home</a>
</li>
<li>
<a href="index.html">Home</a>
</li>
</ul>
</div>
</body>
</html>
Здесь я делаю одно изменение в самом низу CSS, так как я хотел, чтобы эффект наведения был чуть более выраженным. Я применяю эффект масштаба трансформации к li's выпадающего списка.
Первый раскрывающийся список работает просто отлично, а затем второй раскрывающийся список - нет.
Может кто-нибудь объяснить, что происходит?
* {
margin: 0;
padding: 0;
}
body {
background-color: hsla(33,25%,75%,1);
box-sizing: border-box;
}
.flex-container {
width: 100%;
}
.flex-container a {
background: lightskyblue;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
height: 25px;
padding: 10px;
text-decoration: none;
transition: background-color 500ms, height 500ms, color 500ms;
}
.flex-container a:hover {
background: cornflowerblue;
color: snow;
}
.flex-container li:hover {
box-shadow: 10px 10px 10px black;
}
.flex-container ul {
list-style: none;
display: flex;
}
.flex-container > ul > li {
width: 100%;
position: relative;
}
ul li ul {
flex-direction: column;
position: absolute;
width: 100%;
left: 50%;
}
ul li li {
width: 100%;
top: 0;
height: 0;
overflow: hidden;
transition-duration: 500ms;
}
li:hover > ul > li {
height: 45px;
}
ul li li:hover {
transform: scale(1.1);
}
<!DOCTYPE html>
<html lang="eng">
<head>
<title>Page 2</title>
<meta charser="utf-8">
<link rel="stylesheet" href="styles/styles2.css">
</head>
<body>
<div class="flex-container">
<ul>
<li>
<a href="index.html">Home</a>
<ul>
<li>
<a href="Page2.html">Two</a>
</li>
<li>
<a href="Page2.html">Two</a>
</li>
<li>
<a href="Page2.html">Two</a>
<ul>
<li>
<a href="Page2.html">two</a>
</li>
<li>
<a href="Page2.html">two</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="index.html">Home</a>
</li>
<li>
<a href="index.html">Home</a>
</li>
<li>
<a href="index.html">Home</a>
</li>
</ul>
</div>
</body>
</html>