Responsive NavBar Dropdown for Aspnet Only CSS and Script

Question

Having issue with dropdown Navbar with CSS, it will overlap my button. If i change

<a asp-controller="Home" asp-action="Category" class="dropbtn">Category</a>

to

<button class="dropbtn">Category
   <i class="fa fa-caret-down"></i>
</button>`

it will work. why is that so? did i done something wrong somewhere?

https://jsfiddle.net/0tugk2L5/

Answer 1

you can use display flex. it will solve your problem, fiddle

 body {margin:0;font-family:Arial} .topnav { display: flex; background-color: #333; } .topnav:after { content: ''; display: table; clear: both; } .topnav a { display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; } .active { background-color: #4CAF50; color: white; } .topnav .icon { display: none; } .dropdown .dropbtn { font-size: 17px; border: none; outline: none; color: white; padding: 14px 16px; background-color: inherit; font-family: inherit; margin: 0; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } .topnav a:hover, .dropdown:hover .dropbtn { background-color: #555; color: white; } .dropdown-content a:hover { background-color: #ddd; color: black; } .dropdown:hover .dropdown-content { display: block; } 

 <div class="topnav" id="myTopnav"> <a asp-controller="Home" asp-action="index">Home</a> <div class="dropdown"> <a asp-controller="Home" asp-action="Category" class="dropbtn">Category</a> <i class="fa fa-caret-down"></i> <div class="dropdown-content"> <a asp-controller="Home" asp-action="AddCategory">Add Category</a> </div> </div> <div class="dropdown"> <a asp-controller="Home" asp-action="LeaveType" class="dropbtn">Leave Type</a> <i class="fa fa-caret-down"></i> <div class="dropdown-content"> <a asp-controller="Home" asp-action="AddLeave">Add Leave Type</a> </div> </div> <a href="javascript:void(0);" style="font-size:15px; width:75%;" class="icon" onclick="myFunction()">&#9776;</a> </div> 

Answer 2

I have edited your css file, use this and you issue will be resolved.

body {margin:0;font-family:Arial}

.topnav {
  background-color: #333;
  float:left;
  width:100%;
  position:relative;
}

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.active {
  background-color: #4CAF50;
  color: white;
}

.topnav .icon {
  display: none;
}

.dropdown {
    float: left;
}

.dropdown .dropbtn {
    font-size: 17px;    
    border: none;
    outline: none;
    color: white;
    padding: 14px 16px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
}

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

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

.topnav a:hover, .dropdown:hover .dropbtn {
  background-color: #555;
  color: white;
}

.dropdown-content a:hover {
    background-color: #ddd;
    color: black;
}

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

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}