Menu PHP MySql Ajax

Database: reanweb
Table: tbl_post (id,name,color )

menu.css

@charset "utf-8";
/* CSS Menu -----------------------------------------*/

body{
margin: 0;
}
.top-menu{
width: 100%;
float: left;
background-color: #d50000;
}
.top-menu ul{
margin: 0;
padding: 0;
list-style-type: none;
}
.top-menu ul li{
float: left;
}
.top-menu ul li a{
display: block;
text-decoration: none;
color: #fff;
padding: 10px 20px;

}
.top-menu ul li a:hover{
background-color: black;
}

/* End CSS Menu -----------------------------------------*/

home.php

<?php
$cn=new mysqli("localhost","root","","reanweb");
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>MenuDB</title>
<link rel="stylesheet" href="Lib/menu.css">
    <script src="Lib/JQuery-3.4.1.js"></script>
</head>

<body>

<div id="menu" class="top-menu">
<ul></ul>
</div>

</body>
    <script>
    $(document).ready(function(){
    get_menu();
    function get_menu(){
    var menu=$('#menu');

    var txt='';

    $.ajax({
    url:'Get/get-menu.php',
    type:'POST',
    dataType:'json',
    success:function(data){
    for(i=0;i<data.length;i++){
    var li='<li><a href="#">'+data[i].name+'</a></li>';

    txt += li;
    }
    menu.find('ul').html(txt);
    }
    });
    }
    });

    </script>

</html>

get-menu.php

<?php
$cn=new mysqli("localhost","root","","reanweb");
    $sql="SELECT name,color FROM tbl_post";
    $result=$cn->query($sql);
    $num=$result->num_rows;
    $data=array();

    while($row=$result->fetch_array()){
    $data[]=array("name"=>$row[0],"color"=>$row[1]);
    }

    echo json_encode($data);
?>

Menu PHP MySql Ajax