html - 仅适用于 Aspnet CSS 和脚本的响应式 NavBar 下拉菜单

Question

使用 CSS 的下拉导航栏有问题，它将与我的按钮重叠。 如果我改变

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

到

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

它会起作用的。为什么会这样？我是不是哪里做错了什么？

https://jsfiddle.net/0tugk2L5/

Answer 1

我已经编辑了你的 css 文件，使用它你的问题就会得到解决。

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