Question

我正在创建一个基于Joomla的网站。我有一个包含5个菜单项的菜单。在最后一个菜单项上，我应该有一个与父菜单具有相同效果的下拉列表。好吧，这听起来很奇怪，所以我用图像和代码解释它：）

joomla创建的HTML代码：

<div id="navi">
  <ul class="menu">
    <li class="item-110"><a href="/joomla/" >Item 1</a></li>
    <li class="item-102"><a href="/joomla/index.php/item2" >Item 2</a></li>
    <li class="item-103"><a href="/joomla/index.php/item3" >Item 3</a></li>
    <li class="item-104"><a href="/joomla/index.php/item4" >Item 4</a></li>
    <li class="item-105 current active deeper parent"><a href="/joomla/index.php/item5" >Item 5</a>
      <ul>
        <li class="item-107"><a href="/joomla/index.php/item5/subitem1" >Subitem 1</a></li>
      </ul>
    </li>
  </ul>
</div>
<!-- navi end -->

我的CSS代码：

#navi li.item-105{
    background-image:url(../images/jugend_blau.png);
    background-repeat:no-repeat;
    background-position:center;
    display:block;
}

#navi li.item-105:hover{
    background-color:#0347b6;
    background-image:url(../images/jugend_grau.png);
    background-repeat:no-repeat;
}

#navi li.item-105 a{
    width:212px;
    height:24px;
    display:block;
    padding-top:76px;
}

#navi li.item-105:hover a{
    color:white;
}

ul.menu ul{
    padding-top:2px;
    display:none;
}

ul.menu ul li{
    width:210px !important;
    height:25px !important;
    background:#e0e2e2 !important;
}

ul.menu li:hover>ul{
    display:block;
}

ul.menu ul li.item-107:hover{
    background:#0347b6 !important;
    display:block;
}

如果我将鼠标悬停在“第5项”上，则“项目5”的悬停是正确的，并且下拉列表已打开。就像我想要的那样。但如果现在将鼠标悬停在“Subitem 1”上，则“项目5”的悬停不会消失...很抱歉我无法上传我的菜单图片，声誉太少＆gt;。＆lt;

有人有想法吗？我希望你知道我的意思:)。

干杯

使用html / css悬停在li上的下拉菜单

0 个答案: