在this page,左栏中有一个垂直菜单。某些导航菜单项具有弹出子菜单项。我想在包含UL.submenu的每个LI的右侧放置一个右箭头(http://www.salsalis.com.au/wp-content/themes/twentyfourteen/images/rarrow.png),这样看起来像这样,但我找不到办法做到这一点。
http://imgur.com/a/rJVU2 (过去2个月,IMG嵌入@ stackoverflow.com似乎已经破了)
以下是Wordpress导航菜单HTML :(实际上很乱):
<div class="menu-main_menu-container">
<ul style="min-height: 600px; height: 259px;" class="sub-nav">
<li id="menu-item-24" class="home_page menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-5 current_page_item menu-item-24"><a href="http://www.salsalis.com.au/">Home</a></li>
<li id="menu-item-23" class="accommodation_page menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-23"><a href="http://www.salsalis.com.au/accommodation/">Accommodation</a>
<ul class="sub-menu">
<li id="menu-item-128" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-128"><a href="http://www.salsalis.com.au/accommodation/wilderness-tents/">Wilderness Tents</a></li>
<li id="menu-item-1381" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1381"><a href="http://www.salsalis.com.au/honeymoon-tent/">Honeymoon Tent</a></li>
<li id="menu-item-129" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-129"><a href="http://www.salsalis.com.au/accommodation/rates/">Rates</a></li>
<li id="menu-item-130" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-130"><a href="http://www.salsalis.com.au/accommodation/the-lodge/">The Lodge</a></li>
<li id="menu-item-127" class="food_page menu-item menu-item-type-post_type menu-item-object-page menu-item-127"><a href="http://www.salsalis.com.au/accommodation/food-and-wine/">Food And Wine</a></li>
<li id="menu-item-126" class="location_page menu-item menu-item-type-post_type menu-item-object-page menu-item-126"><a href="http://www.salsalis.com.au/accommodation/location/">Location</a></li>
<li id="menu-item-125" class="getting_page menu-item menu-item-type-post_type menu-item-object-page menu-item-125"><a href="http://www.salsalis.com.au/accommodation/getting-there/">Getting There</a></li>
</ul>
</li>
<li id="menu-item-124" class="experiance_page menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-124"><a href="http://www.salsalis.com.au/experience/">Experience</a>
<ul class="sub-menu">
<li id="menu-item-967" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-967"><a href="http://www.salsalis.com.au/experience/wave-rider/">Wave Rider</a></li>
<li id="menu-item-122" class="whale_page menu-item menu-item-type-post_type menu-item-object-page menu-item-122"><a href="http://www.salsalis.com.au/experience/whale-shark-swim/">Whale Shark Swim</a></li>
<li id="menu-item-835" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-835"><a href="http://www.salsalis.com.au/experience/humpback-whale-swim/">Humpback Swim</a></li>
<li id="menu-item-121" class="snorkelling_page menu-item menu-item-type-post_type menu-item-object-page menu-item-121"><a href="http://www.salsalis.com.au/experience/snorkelling/">Snorkelling</a></li>
<li id="menu-item-120" class="guidgorge_page menu-item menu-item-type-post_type menu-item-object-page menu-item-120"><a href="http://www.salsalis.com.au/experience/guided-gorge-walks/">Guided Walks</a></li>
<li id="menu-item-119" class="kayaking_page menu-item menu-item-type-post_type menu-item-object-page menu-item-119"><a href="http://www.salsalis.com.au/experience/kayaking/">Kayaking</a></li>
<li id="menu-item-118" class="fising_page menu-item menu-item-type-post_type menu-item-object-page menu-item-118"><a href="http://www.salsalis.com.au/experience/fishing/">Fishing</a></li>
</ul>
</li>
<li id="menu-item-165" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-165"><a href="http://www.salsalis.com.au/special-offers/">Special Offers</a>
<ul class="sub-menu">
<li id="menu-item-183" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-183"><a href="http://www.salsalis.com.au/index.php/sail-and-snorkel-ningaloo/">Sail and Snorkel Ningaloo</a></li>
<li id="menu-item-1654" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1654"><a href="http://www.salsalis.com.au/special-offers/private-charter-flight-packages/">Private Charter Flight Packages</a></li>
</ul>
</li>
<li id="menu-item-117" class="about_page menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-117"><a href="http://www.salsalis.com.au/about-us/">About Us</a>
<ul class="sub-menu">
<li id="menu-item-116" class="ecocre_page menu-item menu-item-type-post_type menu-item-object-page menu-item-116"><a href="http://www.salsalis.com.au/about-us/eco-credentials/">Eco Credentials</a></li>
<li id="menu-item-1174" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1174"><a href="http://www.salsalis.com.au/about-us/sal-salis-facts/">Sal Salis Facts</a></li>
<li id="menu-item-1362" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1362"><a href="http://www.salsalis.com.au/testimonials/">Testimonials</a></li>
<li id="menu-item-1616" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1616"><a href="http://www.salsalis.com.au/seasonal-calendar/">Seasonal Calendar</a></li>
<li id="menu-item-1218" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1218"><a href="http://www.salsalis.com.au/about-us/download-information/">Download Information</a></li>
<li id="menu-item-115" class="gallery_page menu-item menu-item-type-post_type menu-item-object-page menu-item-115"><a href="http://www.salsalis.com.au/about-us/image-gallery/">Image Gallery</a></li>
<li id="menu-item-114" class="terms_page menu-item menu-item-type-post_type menu-item-object-page menu-item-114"><a href="http://www.salsalis.com.au/about-us/terms-and-conditions/">Terms And Conditions</a></li>
</ul>
</li>
<li id="menu-item-113" class="enquire_page menu-item menu-item-type-post_type menu-item-object-page menu-item-113"><a href="http://www.salsalis.com.au/contact-us/">Contact Us</a></li>
<li id="menu-item-311" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-311"><a href="http://www.salsalis.com.au/blog/">Blog</a></li>
</ul>
</div>
答案 0 :(得分:1)
利用伪元素
试试这个
CSS
ul.sub-nav > li.menu-item-has-children::after{
content: "";
position: absolute;
right: 0px;
height: 0px;
top: 0;
bottom: 0;
margin: auto;
border: 6px solid transparent;
border-left-color: #fff;
}
希望这会有所帮助..