надо с помощью только css сделать выпадающий список каждый пункт меню в себе имеет еще несколько (первый например 2 , а второй 3) как сделать так , чтобы высота пункта при наведении увеличивалась в 2 или в 3 раза в зависимости от пункта. Только средствами css это возможно??
1 ответ
Если я правильно понял Вас, то это поможет:
HTML
<ul class="nav">
<li><a href="#">Home</a></li>
<li><a href="#">Frontend Development</a>
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a>
<ul>
<li><a href="#">Resets</a></li>
<li><a href="#">Grids</a></li>
<li><a href="#">Frameworks</a></li>
</ul>
</li>
<li><a href="#">JavaScript</a>
<ul>
<li><a href="#">Ajax</a></li>
<li><a href="#">jQuery</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Backend Dev</a>
<ul>
<li><a href="#">Ruby</a>
<ul>
<li><a href="#">Ruby on Rails</a></li>
<li><a href="#">Sinatra</a></li>
</ul>
</li>
<li><a href="#">PHP</a>
<ul>
<li><a href="#">WordPress</a></li>
<li><a href="#">Symfony</a></li>
</ul>
</li>
</ul>
</li>
<li><p>From Russia with <span class="fa fa-heart"</span></p></li>
</ul>
SCSS
ul {
list-style: none;
padding: 0;
margin: 0;
background: #1bc2a2;
li {
display: block;
position: relative;
float: left;
background: #1bc2a2;
ul {
display: none;
li { border-top: 0; }
}
a {
display: block;
padding: 1em;
text-decoration: none;
white-space: nowrap;
color: white;
&:hover { background: #2c3e50; }
}
p {
color: white;
padding-left: 1em;
& span {
color: red;
}
}
}
}
li:hover {
> ul {
display: block;
position: absolute;
}
li {
float: none;
& a:hover { background: #2c3e50; }
}
a { background: #1bc2a2; }
}
ul ul ul {
left: 100%;
top: 0;
}
// Clearfix
ul {
&:before, &:after {
content: " ";
display: table;
}
&:after { clear: both; }
}
Поиграться на CodePen можно здесь.