AlexFadeev, Author at WordPress Разработчики

Добрый день.
Заранее прошу прощения, если подобный вопрос был. Искал, но как-то неудачно.

В данный момент я делаю выпадающее меню для социальных закладок.
При наведении мышкой на пункт главного меню "Закладки" выпадает нижняя панелька. Все это сопровождается подсветкой на фоне. Потом мышка переходит на панель закладок, подсветка у панельки остается, а у у пункту "Закладки" пропадает. (см.картинку)

ВОПРОС: Как прописать CSS что бы при наведении на панельку подсвечивался пункт "Закладки"

Примечание: Почему то при наведении на панельку загарается иконка над надписью "Закладки". Так и не понял почему, нигде такой зависимости не увидел.
Примечание 2: Подсветка произсодится полупрозрачной градиентной ПГНшкой

Вот код (HTNL+CSS) всего этого блока:

/***************************************************/
/********************* HTML ************************/
/***************************************************/


<div class="header-right">
    <ul class="top-menu">
        <li class="delitel"><span>&nbsp;</span></li>
        <li>
            <span class="bookmarks-menu">&nbsp;</span>
            <a href="#">Закладки</a>
            <div class="socials-menu rc10">
            <div class="chertochka">&nbsp;</div>
                <ul>
                    <li class="social-icons item-1">
                        <a href="..."><img src="..." /></a>
                    </li>
                </ul>
                <div>
                    <span class="link-socials item-1">...</span>
                </div>
            </div>
        </li>
        <li class="delitel"><span>&nbsp;</span></li>
        <li>
            <span class="reg-menu">&nbsp;</span>
            <?php wp_register('', ''); ?>
        </li>
        <li class="delitel"><span>&nbsp;</span></li>
        <li>
            <span class="login-menu">&nbsp;</span>
            <?php wp_loginout(get_option('home')); ?>
        </li>
    </ul>
</div>

/***************************************************/
/********************** CSS ************************/
/***************************************************/



.delitel {
background:#637285 url(images/delitel.png) repeat scroll 0 0;
height:100px;
margin:0;
width:1px;
}

ul.top-menu {
height:100px;
list-style-image:none;
list-style-position:outside;
list-style-type:none;;
}

ul.top-menu li {
    display:inline;
float:left;
padding:0;
text-align:center;
}

ul.top-menu li:hover {
display:inline;
float:left;
padding:0;
}

ul.top-menu li a {
color:#CCCCCC;
display:block;
padding:75px 15px 10px;
}

ul.top-menu li a:hover {
background:transparent url(images/hover-top-menu.png) repeat-x scroll 0 0;
color:#FFFFFF;
display:block;
padding:75px 15px 10px;
}

ul.top-menu ul li a {
float:left;
padding:1px;
}

ul.top-menu ul li a:hover {
float:left;
padding:1px;
}

.login-menu {
background:transparent url(images/login-g.png) no-repeat scroll 0 0;
height:16px;
margin:55px -8px 0;
padding:0;
position:absolute;
width:16px;
}

ul.top-menu li:hover span.login-menu {
background:transparent url(images/login.png) no-repeat scroll 0 0;
height:16px;
margin:55px -8px 0;
padding:0;
position:absolute;
width:16px;
}

.bookmarks-menu {
background:transparent url(images/bookmark-g.png) no-repeat scroll 0 0;
height:16px;
margin:55px -8px 0;
padding:0;
position:absolute;
width:16px;
}

ul.top-menu li:hover span.bookmarks-menu {
background:transparent url(images/bookmark.png) no-repeat scroll 0 0;
height:16px;
margin:55px -8px 0;
padding:0;
position:absolute;
width:16px;
}

.reg-menu {
background:transparent url(images/reg-g.png) no-repeat scroll 0 0;
height:16px;
margin:55px -8px 0;
padding:0;
position:absolute;
width:16px;
}

ul.top-menu li:hover span.reg-menu {
background:transparent url(images/reg.png) no-repeat scroll 0 0;
height:16px;
margin:55px -8px 0;
padding:0;
position:absolute;
width:16px;
}

.socials-menu {
background:#223146 none repeat scroll 0 0;
border:1px solid #637285;
float:none;
height:35px;
margin:-1px -60px 0;
padding:5px 5px 16px;
position:absolute;
width:auto;
}

.socials-menu div {
font-size:0.8em;
}

.socials-menu span {
height:10px;
left:7px;
position:absolute;
}

.chertochka {
background:#223146 none repeat scroll 0 0;
height:1px;
margin:-6px 0 0 54px;
position:absolute;
width:87px;
}

ul.top-menu li:hover div {
background:#223146 url(images/hover-top-menu.png) repeat-x scroll 0 -99px;
}

AlexFadeev

AlexFadeev

Свежее