代码之家 › 专栏 › 技术社区 › JxM

为父菜单项编写稍微不同的CSS

parent menu joomla css html

JxM · 技术社区 · 11 年前

每个人

这里有点麻烦。

所以,基本上,我非常想在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>

因此,我要更改的项是带有.deper.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 也什么都不管用。有什么想法吗?谢谢

2 回复 | 直到 11 年前

Devin 11 年前

我假设这里有一些代码用于显示,但您需要的是这部分:

#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 以及随意调整(记住:我假设你的代码,所以你必须将其调整为真实代码!)

Lodder 11 年前

首先,确保您拥有 #navigation 分配给您的ID <ul> 像这样:

<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 定义十、和 Y 轴,并且还定义了图像的高度,这可能对您有所不同。

希望这有帮助