如何为子菜单添加向右箭头和为子菜单添加向下箭头答案

【问题标题】：How to add right arrow for sub-child and down arrow for child menu如何为子菜单添加向右箭头和为子菜单添加向下箭头
【发布时间】：2018-05-17 23:26:53
【问题描述】：

我有一个 php 表单。这里的下拉菜单是用 php mysql 创建的。菜单是简单的菜单。我需要为子菜单添加right arrow，为带有css的子菜单添加down arrow。我无法修改css。请建议我如何使这个下拉菜单更具吸引力。

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

【问题讨论】：

希望您至少尝试自己编写代码。 Stack Overflow 不是代码编写服务。我建议你做一些additional research，通过谷歌或搜索SO，尝试一下。如果您仍然遇到问题，请返回您的代码并解释您尝试过的操作。
你必须在你的函数中添加一个变量才能知道你的树有多深
@Paulie_D 我正在使用此代码，但没有结果。请帮忙。 .main-navigation ul.children:after {content: "▼";}

标签： php jquery html css mysql

【解决方案1】：

尝试添加这个::

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

【讨论】：

【解决方案2】：

试试这个

menu > li ul a {
    padding: 11px 0 11px 30px;
    font-size: 13px;
}
menu a, #menu a:hover, #menu a:focus, #menu a:active {
     text-decoration: none;
}
menu li, #menu a {
     position: relative;
     display: block;
}
menu a {
     position: relative;
     display: block;
}

【讨论】：