这里有一个很好的工作php
mysqli
css
菜单和子菜单。但他们是一个小问题与PHP。动态菜单和子菜单中的css和php问题
问题发生在下面的图像中。
现在我想删除衬里不是数据内部存在该列表<li>
。在先进的感谢
HTML/CSS/PHP代码:
<?php
$link = new mysqli('localhost','root','','foodbasketonline');
if($link->connect_error){
die("Connection Failed".$link->error);
}
$sql = "SELECT * FROM menus";
$result = $link->query($sql);
$row_count = $result->num_rows;
while($row = $result->fetch_assoc()){
$rows[] = $row;
}
?>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
#main_nav{
width:204px;
background:#f5f5f5;
padding:0;
}
.main_ul{
list-style:none;
padding:0;
position:relative;
margin-bottom:0;
}
li.main_li{
line-height:50px;
border-bottom:1px solid #ddd;
padding-left:20px;
}
ul.main_ul ul{
display:none;
}
ul.main_ul li:hover > ul{
display:block;
background:#fff;
border:1px solid #e5e5e5;
border-radius:5px;
width:150px;
line-height:40px;
padding-left:10px;
position:absolute;
}
ul.main_ul ul li:hover > ul{
display:block;
background:#fff;
border:1px solid #e5e5e5;
border-radius:5px;
width:150px;
margin-left:100px;
line-height:40px;
padding-left:10px;
position:absolute;
top:10px;
}
ul.main_ul ul ul li:hover > ul{
display:block;
background:#fff;
border:1px solid #e5e5e5;
border-radius:5px;
width:150px;
margin-left:80px;
line-height:40px;
padding-left:10px;
position:absolute;
top:30px;
}
@media only screen and (min-device-width: 320px) and (max-device-width: 320px) and (orientation: portrait) {
button.menu_btn{
position:relative;
left:-38%;
}
#main_nav{
width:100%;
background:#f5f5f5;
padding:0;
}
}
@media only screen and (min-device-width: 375px) and (max-device-width: 375px) and (orientation: portrait) {
button.menu_btn{
position:relative;
left:-38%;
}
#main_nav{
width:100%;
background:#f5f5f5;
padding:0;
}
}
@media only screen and (min-device-width: 414px) and (max-device-width: 414px) and (orientation: portrait) {
button.menu_btn{
position:relative;
left:-38%;
}
#main_nav{
width:100%;
background:#f5f5f5;
padding:0;
}
}
</style>
</head>
<body>
<button type="button" class="navbar-toggle btn btn-primary menu_btn" data-toggle="collapse" data-target="#main_nav">
<span class="icon-bar" style="background:#000;"></span>
<span class="icon-bar" style="background:#000;"></span>
<span class="icon-bar" style="background:#000;"></span>
</button>
<div class="collapse navbar-collapse" id="main_nav">
<?php
$items = $rows;
$id='';
echo '<ul class="main_ul">';
foreach($items as $item){
if($item['parent_id'] == 0){
echo '<li class="main_li"><a href="#">'.$item['menu'].'</a>';
$id = $item['id'];
sub($items, $id);
echo '</li>';
}
}
echo '</ul>';
function sub($items, $id){
echo '<ul style="list-style:none;">';
foreach($items as $item){
if($item['parent_id'] == $id){
echo '<li><a href="#">'.$item['menu'].'</a>';
sub($items, $item['id']);
echo '</li>';
}
}
echo '</ul>';
}
?>
</div>
</body>
</html>
**我为什么要呐喊**你问? - 因为你是。头脑低调一点吗? CAPS和** BOLD **不会很好。 –