我必须在我的css中使用什么属性才能在侧边栏导航菜单中使用下划线？

Question

嘿伙计们，我希望我的侧边栏导航菜单没有下划线我尝试使用text-decoration：none属性和list-style-type：none但没有任何效果。到目前为止，一切都按照我想要的方式工作，但我没有找到任何解决方案，如何使链接的下划线消失。请有人帮帮我吗？

#sidebar {
  background-color: f1f1f1;
  position: fixed;
  width: 200px;
  height: 560px;
  float: left;
  margin-left: 5px;
  top: 60px;
}
#sidebar_wrapper {
  background-color: f1f1f1;
  position: fixed;
  width: 200px;
  height: 560px;
  float: left;
  top: 60px;
}
#sidebar ul {
  font-family: monospace;
  font-size: 25px;
  list-style-type: none;
  text-decoration: none;
}
#sidebar li {
  font-family: monospace;
  list-style-type: none;
  text-decoration: none;
}
#sidebar ul li ul li a {
  list-style-type: none;
  text-decoration: none;
}
#sidebar_li ul {

<div id="sidebar">
  <div id="sidebar_wrapper">
    <ul>
      <li>HTML</li>
      <div id="sidebar_li">
        <ul>
          <li><a href="bilder.html">Bilder</a>
          </li>
          <li><a href="tabellen.html">Tabellen</a>
          </li>
          <li><a href="text.html">Text</a>
          </li>
          <li><a href="videos.html">Videos</a>
          </li>

        </ul>
      </div>
      <br/>
      <li>CSS</li>
      <div id="sidebar_li">
        <ul>
          <li><a href="einbinden.html">Einbinden in HTML</a>
          </li>
        </ul>
      </div>
    </ul>
  </div>
</div>

Answer 1

您可以使用a

更改text-decoration: none元素的样式

#sidebar a:link {
  text-decoration: none;
}
#sidebar a:visited {
  text-decoration: none;
}
#sidebar {
  background-color: f1f1f1;
  position: fixed;
  width: 200px;
  height: 560px;
  float: left;
  margin-left: 5px;
  top: 60px;
}
#sidebar_wrapper {
  background-color: f1f1f1;
  position: fixed;
  width: 200px;
  height: 560px;
  float: left;
  top: 60px;
}
#sidebar ul {
  font-family: monospace;
  font-size: 25px;
  list-style-type: none;
  text-decoration: none;
}
#sidebar li {
  font-family: monospace;
  list-style-type: none;
  text-decoration: none;
}
#sidebar ul li ul li a {
  list-style-type: none;
  text-decoration: none;
}
#sidebar_li ul {

<div id="sidebar">
  <div id="sidebar_wrapper">
    <ul>
      <li>HTML</li>
      <div id="sidebar_li">
        <ul>
          <li><a href="bilder.html">Bilder</a>
          </li>
          <li><a href="tabellen.html">Tabellen</a>
          </li>
          <li><a href="text.html">Text</a>
          </li>
          <li><a href="videos.html">Videos</a>
          </li>

        </ul>
      </div>
      <br/>
      <li>CSS</li>
      <div id="sidebar_li">
        <ul>
          <li><a href="einbinden.html">Einbinden in HTML</a>
          </li>
        </ul>
      </div>
    </ul>
  </div>
</div>