JQUERY & CSS DOWN MENU - Невозможно сохранить фон <li>выделенным при наведении на подпункт - PullRequest
Новая
       11

JQUERY & CSS DOWN MENU - Невозможно сохранить фон <li>выделенным при наведении на подпункт

0 голосов
/ 07 декабря 2010

Я создал мега выпадающее меню с плагином hoverintent, который работает как шарм, за исключением того, что цвет фона li не останется черным, когда я помещу свою мышь в subdiv.Я знаю, что это, наверное, глупое решение, но я не могу понять это.Пожалуйста, помогите ...

Сайт: http://www.nestudiosonline.com/test.php

html: 

<ul id="menu">
        <li class="mega"><a class="dkeorg" href="#">DKE.ORG</a></li>
        <li class="megamenu" id="dave"><a class="links" href="#">ABOUT DKE</a> <div id="aboutdke">div content  </div></li>
        <li class="megamenu"><a class="links" href="#">ALUMNI</a></li>
        <li class="megamenu"><a class="links" href="#">UNDERGRADUATES</a></li>
        <li class="megamenu"><a class="links" href="#">EVENTS</a></li>
        <li class="megamenu"><a class="links" href="#">MULTIMEDIA</a></li>
        <li class="megamenu"><a class="links" href="#">SHOP DKE</a></li>
      </ul>

CSS: 

ul#menu
{
    display:block;
    list-style-type:none;
    margin:0;
    padding:0;
}

ul# menu li
{
    display:inline;
    position: relative;
    }

ul#menu div {
  display: none;
}

ul#menu li.mega div {
    position: absolute;
}

ul#menu li.hovering div {
  display: block;
}

#aboutdke
{
    display:block;
    color:#FFF;
    text-align:left;
    font-family:Verdana, Geneva, sans-serif;
    font-size:10px;
    background-color:#000;
    margin:0;
    padding-top:10px;
    padding-right:10px;
    padding-bottom:10px;
    padding-left:10px;
    border:0px;
    width:910px;
    height:280px;
    float:left;
    position:absolute;
    z-index:99999;
    top:164px;
    left:140px;
}

a.links:link
{
    display:block;
    width:120px;
    height:22px;
    padding-top:8px;
    padding-left:3px;
    padding-bottom:0px;
    color:#FFF;
    text-decoration:none;
    text-align:center;
    outline:none;
    float:left;
}

a.links:visited 
    {
    display:block;
    width:120px;
    height:22px;
    padding-top:8px;
    padding-left:3px;
    padding-bottom:0px;
    color:#FFF;
    text-decoration:none;
    text-align:center;
    outline:none;
    float:left;
    } 

/* mouse over link */

a.links:hover
    {
    display:block;
    width:120px;
    height:22px;
    padding-top:8px;
    padding-left:3px;
    padding-bottom:0px;
    color:#FFF;
    text-decoration:underline;
    text-align:center;
    outline:none;
    background-color:#000;
    float:left;
    }   

/* selected link */

a.links:active
    {
    display:block;
    width:120px;
    height:22px;
    padding-top:8px;
    padding-left:3px;
    padding-bottom:0px;
    color:#FFF;
    text-decoration:underline;
    text-align:center;
    outline:none;
    background-color:#000;
    float:left;
    }

JQUERY: 

<script type="text/javascript" charset="utf-8"> 
//<![CDATA[
    $(document).ready(function() {
//add hovering class to li's inside of the unordermened with the id menu     
      function addMega(){
        $(this).addClass("hovering");
        }
//remove hovering class to li's inside of the unordermened with the id menu  
      function removeMega(){
        $(this).removeClass("hovering");
        }
//configuariton for hoverintent plugin, hoveron time, mouse sensitivity, hoveroff time 
    var megaConfig = {
         interval: 300,
         sensitivity: 4,
         over: addMega,
         timeout: 200,
         out: removeMega
    };
//make list items with the class megamenu have the hoverinter plugin excuted on them 
    $("li.megamenu").hoverIntent(megaConfig)


    });


    //]]>
    </script>

1 Ответ

0 голосов
/ 07 декабря 2010 
ul#menu li.hovering {
  background-color:#000;
}

Таким образом, сам элемент списка будет иметь черный фон, все дочерние элементы - с самим прозрачным фоном - также будут иметь черный фон этого родителя.

...