PHP Drop Down Menu Help

[phyang]

hi my PHP community :D.

I have a drop down menu but it look weird? it's a plain box with my drop down items from Db(picture down is dummy), it doesn't show any stripe/line that separate them? I'm not too good at HTML and have copy the below lines from some one else drop down sample code and modify to my liking. Anything i can do to change the line below so I can see stripe lines or anything that can make this look nicer?

issue :  echo "<li class='dropdown-submenu' ><a class='test2' href='#' onclick='getCategory(\"" . $rows['name'] . "\")'>" . $rows['name']; 

 

 

while($rows = mysqli_fetch_assoc($result)){

               

                global $myout;

                if($lastname == ''){                 

                    echo "<li class='dropdown-submenu' ><a class='test2' href='#' onclick='getCategory(\"" . $rows['name'] . "\")'>" . $rows['name'];           //printing Db List

                        $lastname = $rows['name'];

                } else {

                    if($lastname == $rows['name']){

                        if($dropdownlevel ==1){                       

                        echo "<span class='caret'><a class='test'  href='#'>&nbsp;&nbsp;&nbsp; -->(more)</a></span></a>";    //display arrow to next level

                        echo "<ul class='dropdown-menu dropreset'>";

                        echo "<li><a  tabindex='-1' href='#' style='padding: 60px' onclick='getCategory(\"" . $rows['name']."\",\"".$rows['Sku']."\")'>".$rows['Sku']."</a></li>";  

 

                        $dropdownlevel =2;

                        } else {

                        

                            echo "<li><a  tabindex='-1' href='#' style='padding: 60px' onclick='getCategory(\"" . $rows['name']."\",\"".$rows['Sku']."\")'>".$rows['Sku']."</a></li>";   //display Level 2 Option

                         

 

         

 

         

[requinix]

You mean you want a line between the items? Between D/M/L and also A/B?

Try adding a top border to every LI that comes after another LI:

ul.dropdown-menu > li + li {
  border-top: ???;
}

 

[phyang]

thankyou kind sir!!
it work! but now also have another problem :(, where the there is space highlighted in yellow  in picture below? so do i need to fix this also in the LIST? or the main UL Class?

    <span style="margin-left: 42px; padding:9px"> Selected System Configs: </span>

        <div class="dropdown " style="margin-left: 42px; padding:9px">

            <button class="btn btn-primary dropdown-toggle" style="margin-left: 48px" id="buttonselect" type="button" data-toggle="dropdown">None Selected

            <span class="caret"></span></button>

            <ul class="dropdown-menu">

 

while($rows = mysqli_fetch_assoc($result)){

               

                global $myout;

                if($lastname == ''){

                    echo "</a>";

                    echo "</li>";

                    echo "<li style='border: 2px solid blue;' class='dropdown-submenu' ><a class='test2' href='#' onclick='getCategory(\"" . $rows['name'] . "\")'>" . $rows['name'];

             

                        $lastname = $rows['name'];

                } else {

                    if($lastname == $rows['name']){

                        if($dropdownlevel ==1){

 

                        echo "<span class='caret'><a class='test'  href='#'>&nbsp;&nbsp;&nbsp; -->(more)</a></span></a>";

                        echo "<ul class='dropdown-menu dropreset'>";

                        echo "<li style='border: 2px solid blue;'><a  tabindex='-1' href='#' style='padding: 60px' onclick='getCategory(\"" . $rows['name']."\",\"".$rows['Sku']."\")'>".$rows['Sku']."</a></li>";  

 

                        $dropdownlevel =2;

                        } else {

                

                            echo "<li style='border: 2px solid blue;'><a  tabindex='-1' href='#' style='padding: 60px' onclick='getCategory(\"" . $rows['name']."\",\"".$rows['Sku']."\")'>".$rows['Sku']."</a></li>";  

                          }

 

[requinix]

Are you familiar with your browser's developer tools? Here's a few links for Chrome, but all major browsers have something similar:
https://www.codecademy.com/article/f1-devtools-box-model
https://developer.chrome.com/docs/devtools/css/
https://feastdesignco.com/how-to/use-inspect-element-troubleshoot/

You can use that to find out where the extra spacing is coming from. Start by looking at the parent UL...

[phyang]

Thankyou Requinix!