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

Posted 2023-05-09

【中文标题】如何为子菜单添加向右箭头和为子菜单添加向下箭头

【英文标题】：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: "▼";

【参考方案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;