Как установить на hover подвечивание двух разных элементов одновременно?

Добрый день!
Вот такой контейнер, нужно подсвечивать при :hover пункт меню и выпадающий список, при наеверении на выпадающий список нужно что бы подвечивалось название пункта меню который мы выбрали (а :active работает только при клике(( ). Пока подсвечиваю только background класса li-hover. когда дописываю цвет ссылки .li-hover a:hover {color:#ccff33} результата 0.
Заранее большое спасибо всем за помощь и советы!
<div class="container" >
        <div class="row header">
            <div class="col-lg-2 col-md-2 col-xs-6">
               <img src="images/logo.png" alt="logo" class="img-responsive"> 
            </div> 
            <div class="col-lg-7 cold-md-12 col-xs-12">
                <ul class="nav nav-pills menu-tittle">
                    <li class="dropdown li-hover">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                          TVs
                        </a>
                        <ul class="dropdown-menu drop-header">
                            <li><a href="#">LED TVs</a></li>
                            <li><a href="#">LCD TVs</a></li>
                            <li><a href="#" style="border:none;">Plasma TVs</a></li>
                        </ul>
                    </li>
                    <li class="dropdown li-hover">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                          Kitchen
                        </a>
                        <ul class="dropdown-menu drop-header">
                            <li><a href="#">link 1</a></li>
                            <li><a href="#">link 2</a></li>
                            <li><a href="#" style="border:none;">link 3</a></li>
                        </ul>
                    </li>
                    <li class="dropdown li-hover">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                          Laundry
                        </a>
                        <ul class="dropdown-menu drop-header">
                            <li><a href="#">link 1</a></li>
                            <li><a href="#">link 2</a></li>
                            <li><a href="#" style="border:none;">link 3</a></li>
                        </ul>
                    </li>
                    <li class="dropdown li-hover">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                          Bundles
                        </a>
                        <ul class="dropdown-menu drop-header">
                            <li><a href="#">link 1</a></li>
                            <li><a href="#">link 2</a></li>
                            <li><a href="#" style="border:none;">link 3</a></li>
                        </ul>
                    </li>
                    <li class="dropdown li-hover">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                          Top Rentals
                        </a>
                        <ul class="dropdown-menu drop-header">
                            <li><a href="#">link 1</a></li>
                            <li><a href="#">link 2</a></li>
                            <li><a href="#" style="border:none;">link 3</a></li>
                        </ul>
                    </li>
                    <li class="dropdown li-hover">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                          Why Rent?
                        </a>
                        <ul class="dropdown-menu drop-header">
                            <li><a href="#">link 1</a></li>
                            <li><a href="#">link 2</a></li>
                            <li><a href="#" style="border:none;">link 3</a></li>
                        </ul>
                    </li>
                </ul>
            </div> 
            <div class="col-lg-3 col-md-3 col-xs-6">
                <ul class="nav nav-pills header-right">
                    <li class="dropdown li-hover-right">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                            <span class="glyphicon glyphicon-search span-color"></span>
                        </a>
                        <ul class="dropdown-menu drop-header-right">
                             <span class="top-span-right">Search this website</span>
                            <div class="input-group">
                              <input type="text" class="header-input">
                              <span class="input-group-btn">
                                <button class="btn  header-btn" type="button">search</button>
                              </span>
                            </div>
                        </ul>
                    </li>
                    <li class="li-hover-right">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                          <span class="glyphicon glyphicon-shopping-cart  span-color"></span> (0) in Cart
                        </a>
                    </li>
                </ul>
            </div> 
        </div>
    </div>
  • Вопрос задан
  • 3060 просмотров
Решения вопроса 1
iusfof
@iusfof
Front-end developer
codepen.io/iusfof/pen/CpcaB я вас правильно понял?
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
Rema1ns
@Rema1ns
и так сойдет
Обычно вложенный список делают в теге a, наверное через цсс в вашем случае не получиться, но всегда можно за js-ить)))
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы