Question

大家！

在这里遇到了一些麻烦。

所以，基本上，我非常想在Joomla中制作我的父菜单项！主菜单与其他菜单项略有不同。我想要实现的是，父项目将会......让我们说，在右侧用bg图像制作一个小三角形以向访问者展示包含的子菜单。

我一直在努力让我的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 { padding:37px 22px 37px 8px !important; background-image: url(../images/more.png) !important; background-position: right !important; background-repeat: no-repeat !important; }

我也尝试将#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并随意调整（请记住：我假设您的代码，因此您必须根据实际代码进行调整！）

Answer 2

首先，确保您确实为#navigation分配了<ul> ID，如下所示：

<ul id="navigation">

其次，请确保您根据项目编号执行不目标菜单项，例如.item-108。这些是由Joomla指定的，将来可能会发生变化。

好的，正如您所提到的，您希望使用deeper和parent类来定位菜单项，为此，您可以使用以下内容：

.deeper.parent a {
    background: url(../images/more.png) no-repeat;
    background-position: right center;
    height: 12px;
}

请注意，我使用right center来定义 X 和 Y 轴，还定义了图像的高度，这可能与您有所不同

希望这有帮助

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

2 个答案: