html - Write slightly different CSS for Parent Menu Item -
everybody!
got bit of trouble here.
so, basically, badly want make parent menu items in joomla! main menu different other menu items. want achieve parent item have ... let's say, little triangle made bg image on right show visitors there submenus included.
i've been trying css working, somehow nothing happenes , inspecting generated code , elements css hasn't applied parent items.
here's code:
<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> so, items want change .deeper.parent class.
the css code wanted apply doesn't work:
#navigation .parent { padding:37px 22px 37px 8px !important; background-image: url(../images/more.png) !important; background-position: right !important; background-repeat: no-repeat !important; }
i tried changing #navigation .parent #navigation .deeper.parent , #navigation li.item-108.deeper.parent well. nothing works. ideas? thanks!
i'm assuming coding here display purposes, want here part:
#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} you can see fiddle , adjust @ (remember: i'm assuming code you'll have adjust real code!)
Comments
Post a Comment