Hassan Nasir Hassan Nasir - 1 year ago 88
CSS Question

Navigation drop down menu hidden

im trying to build a navigation menu. Everything works fine except the list item with drop down items. It seems to be hidden.Im using php to code it all up and create a dynamic menu.

The php and html code is:

<div class="navigation w3-container" >

<ul class="topnav" id="myTopnav" >

$query = "SELECT * FROM categories";
$select_all_categories_query = mysqli_query($connection, $query);

while($row = mysqli_fetch_assoc($select_all_categories_query)){

$cat_title = $row['cat_title'];
$cat_position = $row['cat_position'];
$cat_thumbnail = $row['cat_thumbnail'];
$cat_image = $row['cat_image'];
$cat_link = $row['cat_link'];
$cat_dropdown = $row['cat_dropdown'];

echo "<li> <a href='{$cat_link}'>{$cat_title}</a></li>";

// THIS IS THE DROP DOWN MENU CODE BELOW. The top level menu appears but the drop down menu is hidden :

echo "<li class='dropdown'><a href='#' class='dropbtn'>Dropdown</a>
<div class='dropdown-content'>
<a href='#'>Link 1</a>
<a href='#'>Link 2</a>
<a href='#'>Link 3</a>


echo "<li class='icon'>
<a id='lastli' href='javascript:void(0);' onclick='myFunction()'>&#9776;</a>


Here is the css:

ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
position: relative;


/* Float the list items side by side */
ul.topnav li {float: left;}

/* Style the links inside the list items */
ul.topnav li a {
display: inline-block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: 0.3s;
font-size: 14px;
border-right: 1px solid #00001a;


li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;

li a:hover, .dropdown:hover .dropbtn {
background-color: red;

li.dropdown {
display: inline-block;

.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
display: block;

When i do an overflow auto on the ul i get a scroll option under the drop down. But nothing else makes it work.

EDIT: I am adding a screenshot of what shows when i hover over the drop down menu. (I have made the items of the drop down green background just so that they are more obvious to spot). You can see the little green bit under 'dropdown'

If i change position: absolute to position:initial; in .dropdown-content then it looks bit better but it is still only extending the parent div and is not dropping vertically down

Answer Source

I dont understand your question. Which li is not working.. is that the else part li does not working?

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download