Здравствуйте. Есть меню, в нем ссылки. И если при навести курсор на ссылку - появляется подменю еще.
Вопрос: Каким образом оставлять выделенной ссылку, в под-меню которой сейчас находится курсор?
.navig {
width: 300px;
font-family: 'Arsenal';
font-weight: bold;
font-size: 15px;
background-color: #f5f9f2;
}
.navig .links .no-sub {
color: #000;
border-bottom: 1px solid #e1e1e1;
list-style: none;
}
.navig .links .no-sub:last-child {
border-bottom: 0px;
}
.navig .links .no-sub a {
display: block;
padding: 14px;
color: #000;
border-left: 1px solid #f5f9f2;
}
.navig .links .no-sub a:hover {
display: block;
padding: 14px;
color: #000;
background-color: #fff;
border-left: 1px solid #e1e1e1;
}
.navig .links .no-sub:last-child a:hover {
border-bottom: 1px solid #e1e1e1;
}
.navig .links .no-sub:first-child a:hover {
border-top: 1px solid #e1e1e1;
}
.navig .links .no-sub:last-child a {
border-bottom: 1px solid #fff;
}
.navig .links .no-sub:first-child a {
border-top: 1px solid #fff;
}
.sub-menu {
margin-left: 299px;
position: absolute;
margin-top: -47px;
background-color: #fff;
padding: 0;
width: 270px;
z-index: 99999;
border-right: 1px solid #e1e1e1;
/*border-bottom: 1px solid #e1e1e1;*/
border-top: 1px solid #e1e1e1;
display: none;
}
.sub-menu .sub {
list-style: none;
}
.sub-menu .sub a {
display: block;
}
.sub-menu .sub a:hover {
background-color: #fff;
text-decoration: underline;
}
.sub-menu .sub:first-child a:hover {
background-color: #fff;
text-decoration: underline;
border-top: 0px solid #000;
}
.links > .no-sub:hover .sub-menu {
display: block;
}
<div class="navig">
<div class="links">
<li class="no-sub">
<a href="/">Первая категория</a>
<ul class="sub-menu">
<li class="sub"><a href="/">1Первая ссылка</a></li>
<li class="sub"><a href="/">1Вторая ссылка</a></li>
</ul>
</li>
<li class="no-sub">
<a href="/">Вторая категория</a>
</li>
<li class="no-sub">
<a href="/">Категория с подкатегориями</a>
<ul class="sub-menu">
<li class="sub"><a href="/">Первая ссылка</a></li>
<li class="sub"><a href="/">Вторая ссылка</a></li>
</ul>
</li>
<li class="no-sub">
<a href="/">Вторая категория</a>
</li>
</div>
</div>
.navig .links .no-sub:hover a{
код
}
Пример
.navig {
width: 300px;
font-family: 'Arsenal';
font-weight: bold;
font-size: 15px;
background-color: #f5f9f2;
}
.navig .links .no-sub {
color: #000;
border-bottom: 1px solid #e1e1e1;
list-style: none;
}
.navig .links .no-sub:last-child {
border-bottom: 0px;
}
.navig .links .no-sub a {
display: block;
padding: 14px;
color: #000;
border-left: 1px solid #f5f9f2;
}
.navig .links .no-sub:hover a,
.navig .links .no-sub a:hover {
display: block;
padding: 14px;
color: #000;
background-color: #fff;
border-left: 1px solid #e1e1e1;
}
.navig .links .no-sub:last-child a:hover {
border-bottom: 1px solid #e1e1e1;
}
.navig .links .no-sub:first-child a:hover {
border-top: 1px solid #e1e1e1;
}
.navig .links .no-sub:last-child a {
border-bottom: 1px solid #fff;
}
.navig .links .no-sub:first-child a {
border-top: 1px solid #fff;
}
.sub-menu {
margin-left: 299px;
position: absolute;
margin-top: -47px;
background-color: #fff;
padding: 0;
width: 270px;
z-index: 99999;
border-right: 1px solid #e1e1e1;
/*border-bottom: 1px solid #e1e1e1;*/
border-top: 1px solid #e1e1e1;
display: none;
}
.sub-menu .sub {
list-style: none;
}
.sub-menu .sub a {
display: block;
}
.sub-menu .sub a:hover {
background-color: #fff;
text-decoration: underline;
}
.sub-menu .sub:first-child a:hover {
background-color: #fff;
text-decoration: underline;
border-top: 0px solid #000;
}
.links > .no-sub:hover .sub-menu {
display: block;
}
<div class="navig">
<div class="links">
<li class="no-sub">
<a href="/">Первая категория</a>
<ul class="sub-menu">
<li class="sub"><a href="/">1Первая ссылка</a></li>
<li class="sub"><a href="/">1Вторая ссылка</a></li>
</ul>
</li>
<li class="no-sub">
<a href="/">Вторая категория</a>
</li>
<li class="no-sub">
<a href="/">Категория с подкатегориями</a>
<ul class="sub-menu">
<li class="sub"><a href="/">Первая ссылка</a></li>
<li class="sub"><a href="/">Вторая ссылка</a></li>
</ul>
</li>
<li class="no-sub">
<a href="/">Вторая категория</a>
</li>
</div>
</div>
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
Перевод документов на английский язык: Важность и ключевые аспекты
Я новичок в CSS-анимации, и стараюсь в течение последних часов, чтобы анимация заработалаПытаюсь понять код Material Design, но пока не могу заставить...