[英]HTML menu separator
I have a menu in which I want to insert separators right of the buttons, but do not want on sub-menus. 我有一个菜单,要在其中插入分隔符,但不希望出现在子菜单中。 HTML: HTML:
<ul id="nav" class ="pull-right">
<ul id="menu-menu1" class="sf-menu sf-vertical"><li id="menu-item-278" class="wordpress-classes"><a href="http://localhost/wordpress/">HOME</a>
<ul class="sub-menu">
<li id="menu-item-314" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-296"><a href="http://localhost/wordpress/">Home</a></li>
<li id="menu-item-303" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-296"><a href="http://localhost/wordpress/?page_id=57">Products</a></li>
<li id="menu-item-302" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-296"><a href="http://localhost/wordpress/?page_id=63">Dreams</a></li>
<li id="menu-item-301" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-296"><a href="http://localhost/wordpress/?page_id=106">Vouchers</a></li>
</ul>
</li>
<li id="menu-item-285" class="wordpress-classes"><a href="?page_id=66">Plans</a>
<ul class="sub-menu">
<li id="menu-item-294" class="wordpress-classes"><a href="http://localhost/wordpress/?page_id=66">Travels</a></li>
<li id="menu-item-293" class="wordpress-classes"><a href="http://localhost/wordpress/?page_id=103">Pricings</a></li>
</li>
</ul>
</ul>
</ul>
CSS(that i want to insert): CSS(我要插入):
background-image: url(images/sep_menu.jpg);
background-repeat: no-repeat;
background-position: right;
I can not create the classes because they are in wordpress. 我无法创建类,因为它们在wordpress中。 The classes are something like: 这些类类似于:
menu-item menu-item-type-post_type menu-item-object-page menu-item-294
What do I do? 我该怎么办? Thanks! 谢谢!
You can do this with jQuery this way: 您可以通过jQuery这样操作:
$(function () {
$('ul:eq(0) li').css({
'background-image': 'url(images/sep_menu.jpg) right no-repeat'
});
});
#menu-menu1 li {
background-image: url(images/sep_menu.jpg);
background-repeat: no-repeat;
background-position: right;
}
#menu-menu1 ul li {
background-image: none;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.