php - Add right arrow to menu bar

I want to add css right arrow where ul has a ul child? Below is triangle right css. I want to add in my menu so that users know this menu has sub menu.

How is it possible to detect in pure css if ali has children of ul.children?

I want to add below triangle-right arrow to my css. Plz help.

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

php code for the menu:

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

<ul >
  <?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 >
            <?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 >
                  <?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>
Copy code

css for the menu bar

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