html - 为父菜单项编写略有不同的 CSS

Question

各位!

这里有点麻烦。

所以，基本上，我非常想在 Joomla 中制作我的父菜单项!主菜单与其他菜单项略有不同。我想要实现的是，父项将具有...比方说，右侧用 bg 图像制作的小三 Angular 形向访问者显示其中包含一些子菜单。

我一直在努力让我的 CSS 正常工作，但不知何故没有任何反应，而且在检查生成的代码和元素时，CSS 没有对父项应用任何内容。

代码如下:

<li class="item-101 current active"><a href="/" >Domov</a></li>
<li class="item-107"><a href="/index.php/o-meni" >O meni</a></li>
<li class="item-108 deeper parent"><a href="/index.php/psihoterapija" >Psihoterapija</a>
    <ul class="nav-child unstyled small">
        <li class="item-113"><a href="/index.php/psihoterapija/podmeni-1" >Podmeni 1</a></li>
    </ul>
</li>
<li class="item-109"><a href="/index.php/zdravstvena-psihoterapija" >Zdravstvena psihologija</a></li>
<li class="item-114 deeper parent"><a href="/index.php/ponudba" >Ponudba</a>
    <ul class="nav-child unstyled small">
        <li class="item-117"><a href="/index.php/ponudba/podmeni-2" >Podmeni 2</a></li>
        <li class="item-118"><a href="/index.php/ponudba/podmeni-3" >Podmeni 3</a></li>
        <li class="item-119"><a href="/index.php/ponudba/podmeni-4" >Podmeni 4</a></li>
    </ul>
</li>
<li class="item-139 deeper parent"><span class="nav-header">Ostalo</span>
    <ul class="nav-child unstyled small">
        <li class="item-138"><a href="/index.php/ostalo/aktualno" >Arhiv novic</a></li>
        <li class="item-116"><a href="/index.php/ostalo/povezave" >Povezave</a></li>
        <li class="item-115"><a href="/index.php/ostalo/kontakt" >Kontakt</a></li>
    </ul>
</li>

所以，我要更改的元素是那些具有 .deeper.parent 类的元素。

我想应用但不起作用的 CSS 代码:

#navigation .parent {
填充:37px 22px 37px 8px !重要；
背景图像:url(../images/more.png)!重要；
背景位置:正确!重要；
背景重复:不重复!重要；
}

我还尝试将 #navigation .parent 更改为 #navigation .deeper.parent 和 #navigation li.item-108.deeper.parent以及。没有什么真正有效。有任何想法吗？谢谢!

Answer 1

我假设这里有一些编码用于显示目的，但你在这里想要的是这部分:

#navigation li.parent { padding:37px 22px 37px 8px !important; background:url(http://upload.wikimedia.org/wikipedia/commons/f/f7/Arrow-down-navmenu.png)  no-repeat right center}

您可以 see fiddle并随意调整(记住:我假设您的代码，因此您必须将其调整为您的真实代码!)