CSS：ULメニューを含むLIの最後に右矢印を配置する方法

Question

this pageには、左の列に垂直メニューがあります。ナビゲーションメニュー項目の一部には、フライアウトサブメニュー項目があります。右の矢印（http://www.salsalis.com.au/wp-content/themes/twentyfourteen/images/rarrow.png）を、UL.subメニューを含むすべてのLIの右側に配置して、このように見せたいが、これを行う方法が見つからない。 （そのまま乱雑）：

<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> 

Answer 1

使用してください

http://imgur.com/a/rJVU2 （最後の2ヶ月間、IMGは@ stackoverflow.comが壊れているように見える埋め込み）

ここでは、WordpressのナビゲーションメニューのHTMLです擬似要素の

この

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; 
    } 

これは役に立ちます。