Оставить hover у ссылки по которой открыли под-меню

215
15 апреля 2017, 23:10

Здравствуйте. Есть меню, в нем ссылки. И если при навести курсор на ссылку - появляется подменю еще.

Вопрос: Каким образом оставлять выделенной ссылку, в под-меню которой сейчас находится курсор?

.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>

Answer 1
.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>

READ ALSO
Загрузка css-файла в кэш

Загрузка css-файла в кэш

Сделал сайт с помощью bootstrapНа компьютере все работает идеально

179
spree footer image path ошибка

spree footer image path ошибка

Добрый деньНачал использовать spree,к горю или к сожалению

178
Как создать эффект пульсации при клике - `Material Design`

Как создать эффект пульсации при клике - `Material Design`

Я новичок в CSS-анимации, и стараюсь в течение последних часов, чтобы анимация заработалаПытаюсь понять код Material Design, но пока не могу заставить...

314
C# POST запрос с несколькими параметрами

C# POST запрос с несколькими параметрами

Пример запроса на сервер:

290