'issue with css and php in dynamic menu and sub menu

Here I have a fine working php mysqli css menu and sub menu. But there is a bit minor issue with php:

MySQL database:

Now I want to remove that lining with not data exists inside that list <li>.

HTML/CSS/PHP code:

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

php css mysql

Solution 1:^[1]

i think replace this code , hope it will work. it will generate ul if data found and first create ul then next time not create ul and same end section but not tested

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

$i = 0;
foreach ($items as $item) {
    if ($i == 0) {
        echo '<ul class="main_ul">';
    }
    if ($item['parent_id'] == 0) {
        echo '<li class="main_li"><a href="#">' . $item['menu'] . '</a>';
        $id = $item['id'];
        sub($items, $id);
        echo '</li>';
    }
    if ($i == 0) {
        echo '</ul>';
    }
    $i++;
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Shafiqul Islam

'issue with css and php in dynamic menu and sub menu

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]