메뉴 막대에 오른쪽 화살표 추가

Question

ul에 ul 자식이있는 곳에 CSS 오른쪽 화살표를 추가하고 싶습니까? 아래 삼각형 오른쪽 CSS입니다. 사용자가이 메뉴에 하위 메뉴가 있음을 알 수 있도록 내 메뉴에 추가하고 싶습니다.

li에 ul.children의 하위 항목이있는 경우 어떻게 순수 CSS에서 감지 할 수 있습니까?

내 삼각형 - 오른쪽 화살표를 아래에 추가하고 싶습니다. Plz 도움. 메뉴에 대한

#triangle-right { 
    width: 0; 
    height: 0; 
    border-top: 50px solid transparent; 
    border-left: 100px solid red; 
    border-bottom: 50px solid transparent; 
} 

PHP 코드 : 메뉴 바

<?php 
$stmt = $pdo->query('SELECT * FROM `category` where `parent_id` = 0'); 
$stmt->execute(); 
?> 

<ul class="top-level-menu"> 
    <?php while($menu1 = $stmt->fetch()){ ?> 
     <li><a href="<?php echo $menu1['category_link'] . "\n"; ?>"><?php echo $menu1['product'] . "\n"; ?></a> 

      <?php $stmt1 = $pdo->prepare('SELECT * FROM category WHERE parent_id = ?'); 
        $stmt1->execute([$menu1['id']]); 
        ?> 
        <ul class="second-level-menu"> 
         <?php while($menu2 = $stmt1->fetch()){ ?> 
         <li><a href="<?php echo $menu2['category_link'] . "\n"; ?>"><?php echo $menu2['product'] . "\n"; ?></a> 
            <?php 
            $stmt2 = $pdo->prepare('SELECT * FROM category WHERE parent_id = ?'); 
            $stmt2->execute([$menu2['id']]); 
            ?> 
           <ul class="third-level-menu"> 
            <?php while($menu3 = $stmt2->fetch()){ ?> 
            <li><a href="<?php echo $menu3['category_link'] . "\n"; ?>"><?php echo $menu3['product'] . "\n"; ?></a> 
            </li> 
            <?php } ?> 
           </ul> 

         </li> 

         <?php } ?> 
        </ul> 


     </li> 
<?php } ?> 
</ul> 

CSS

<style> 
/* Menu Styles */ 

.third-level-menu 
{ 
    position: absolute; 
    top: 0; 
    right: -220px; 
    width: 220px; 
    list-style: none; 
    padding: 0; 
    margin: 0; 
    display: none; 
} 

.third-level-menu > li 
{ 
    height: 30px; 
    background: #999999; 
} 
.third-level-menu > li:hover { background: #CCCCCC; } 

.second-level-menu 
{ 
    position: absolute; 
    top: 30px; 
    left: 0; 
    width: 200px; 
    list-style: none; 
    padding: 0; 
    margin: 0; 
    display: none; 
} 

.second-level-menu > li 
{ 
    position: relative; 
    height: 30px; 
    background: #999999; 
} 
.second-level-menu > li:hover { background: #CCCCCC; } 

.top-level-menu 
{ 
    list-style: none; 
    padding: 0; 
    margin: 0; 
} 

.top-level-menu > li 
{ 
    position: relative; 
    float: left; 
    height: 30px; 
    width: 100px; 
    background: #999999; 
} 
.top-level-menu > li:hover { background: #CCCCCC; } 

.top-level-menu li:hover > ul 
{ 
    /* On hover, display the next level's menu */ 
    display: inline; 
} 


/* Menu Link Styles */ 

.top-level-menu a /* Apply to all links inside the multi-level menu */ 
{ 
    font: bold 14px Arial, Helvetica, sans-serif; 
    color: #FFFFFF; 
    text-decoration: none; 
    padding: 0 0 0 10px; 

    /* Make the link cover the entire list item-container */ 
    display: block; 
    line-height: 30px; 
} 
.top-level-menu a:hover { color: #000000; } 
</style> 

Answer 1

불행하게도 CSS는 네이티브 'hasParent'선택,하지만 당신이 정말로 순수한 필요하지 않는 경우 -css와 같은 것을 시도 할 수 있습니다.

li { 
 
    position: relative; 
 
    float: left; 
 
    clear: left; 
 
} 
 

 
li > ul::after { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 5px; 
 
    right: 0; 
 
    width: 0; 
 
    height: 0; 
 
    border-top: 5px solid transparent; 
 
    border-left: 5px solid red; 
 
    border-bottom: 5px solid transparent; 
 
}

<ul> 
 
    <li>lorem</li> 
 
    <li>lorem</li> 
 
    <li>lorem</li> 
 
    <li>lorem</li> 
 
    <li> 
 
    lorem 
 
    <ul> 
 
     <li>1</li> 
 
     <li>2</li> 
 
     <li>3</li> 
 
    </ul> 
 
    </li> 
 
</ul>