Question

我有一个php表单。这里使用php mysql创建下拉菜单。菜单是简单的菜单。我需要为子子项添加right arrow，为css添加down arrow子菜单。我无法修改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;}

Answer 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;
}

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

2 个答案: