サブメニューの右矢印と子メニューの下矢印を追加するには

Question

私はPHPフォームを持っています。ここでドロップダウンメニューはPHPのmysqlで作成されます。メニューは簡単なメニューです。私は子の子供のためにright arrowと子のメニューのためのdown arrowをCSSで追加する必要があります。私はCSSを修正することができません。 Plzはこのドロップダウンメニューをより魅力的にする方法を提案します。

<style> 
ul {list-style: none; padding: 0; margin: 0; background: #1bc2a2;} 
ul li {display: block; position: relative; float: left; background: #1bc2a2;} 
li ul { display: none; } 
ul li a {display: block; padding: 1em; text-decoration: none; white-space: nowrap; color: #fff;} 
ul li a:hover { background: #2c3e50; } 
li:hover > ul {display: block; position: absolute;} 
li:hover li { float: none; } 
li:hover a { background: #1bc2a2; } 
li:hover li a:hover { background: #2c3e50; } 
.main-navigation li ul li { border-top: 0; } 
ul ul ul {left: 100%; top: 0;} 
ul:before, ul:after {content: " "; display: table;} 
ul:after { clear: both; } 
</style> 

これはデータベーステーブルです。

CREATE TABLE tbl_menu(
     id INT AUTO_INCREMENT PRIMARY KEY, 
     label VARCHAR(20) NOT NULL, 
     parent INT DEFAULT NULL 
); 

INSERT INTO tbl_menu VALUES 
(1,'ELECTRONICS',0), 
(2,'TELEVISIONS',1), 
(3,'COMPUTER',1), 
(4,'DELL',3), 
(5,'LCD',2), 
(6,'PLASMA',2), 
(7,'FLASH',6), 
(8,'BIKE',0), 
(9,'MOTORCYCLE',8), 
(10,'SCOOTER',8), 
(11,'BAJAJ',9), 
(12,'MAHINDRA',10); 

これはPHPクエリです。

<?php 
$con=mysqli_connect("localhost","root","","nfs"); 
// Check connection 
if (mysqli_connect_errno()) 
{ 
    echo "Failed to connect to MySQL: " . mysqli_connect_error(); 
} 

function get_menu_tree($parent) 
{ 
    global $con; 
    $menu = ""; 
    $sqlquery = " SELECT * FROM tbl_menu where parent='" .$parent . "' "; 
    $res=mysqli_query($con,$sqlquery); 
    while($row=mysqli_fetch_array($res,MYSQLI_ASSOC)) 
    { 
      $menu .="<li><a href='#'>".$row['label']."</a>"; 

      $menu .= "<ul>".get_menu_tree($row['id'])."</ul>"; //call recursively 

      $menu .= "</li>"; 

    } 

    return $menu; 
} 

?> 
<ul class="main-navigation"> 
      <?php echo get_menu_tree(0); ?> 
</ul> 

Answer 1

これを追加してみてください::

ul li {position: relative;} 
ul li::after {content: "▼"; position: absolute; top: 10px; right: 10px; font-size: 20px;}