0

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

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

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

1
  • Как вариант, использовать не .navig .links .no-sub a:hover, а .navig .links .no-sub:hover 14 апр 2017 в 12:32

1 ответ 1

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>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.