Question

我正在创建一个响应式菜单，在菜单中，当屏幕大小小于800px时，我使用媒体查询添加一些样式。

所以基本上我所做的（除了样式之外）是让li占据页面的整个宽度，而li的内容具有锚点。

问题在于，当媒体查询样式处于活动状态时，我提到的Anchors突然有一个下划线，即使我删除了它。

这是我用的几乎相同风格的小提琴（当然还有问题）： https://jsfiddle.net/shock/32jost95/3/

布局：

<nav id="main-nav">
<a href="#" id="main-nav-toggler"><i class="fa fa-bars"></i></a>
    <u>
        <li><a href="#" class="selected">One</a></li>
        <li><a href="#">Two</a></li>
        <li><a href="#">Three</a></li>
        <li><a href="#">Four</a></li>
    </u>
</nav>

CSS：

#main-nav {
  float: left;
  font-size: 18px;
  list-style: none;
  margin-right: 20px;
  height: 60px;
  background-color: #fff;
  overflow: hidden;
}
#main-nav a {
  display: block;
  color: #e0e0e0;
  padding: 0 14px;
  text-decoration: none;
  line-height: 60px;
  box-sizing: border-box;
  transition: background-color .2s;
}
#main-nav a.selected {
  font-weight: bold;
  background-color: gray;
  position: relative;
}
#main-nav a:hover {
  background-color: gray;
}
#main-nav li {
  float: left;
}

a#main-nav-toggler {
  display: none;
}

@media screen and (max-width: 800px) {
  #main-nav {
    margin: 0;
  }
  #main-nav u {
    position: absolute;
    background-color: gray;
    top: 69px;
    right: 0;
    width: 100%;
  }
  #main-nav u li {
    float: none;
  }

  a#main-nav-toggler {
    display: inline-block;
  }
}

Answer 1

我已经为您更新了它，只是添加text-decoration-color: transparent;它不是预期的行为，但这是我唯一的工作方法

https://jsfiddle.net/32jost95/4/

Answer 2

您需要将<u>更改为<ul>列表。

我认为这是一个错字而非故意的，因此不需要任何真正的解释。

希望这有帮助！

媒体查询样式处于活动状态时，锚点具有不可删除的下划线

2 个答案: