Question

我正在搞乱网络开发，我已经陷入了CSS的悬停部分的问题，我不能让它在我的网站上工作。

我确实有这个工作，当我导航垂直，但后来决定让它水平而不是问题开始的地方。

我在StackOverflow上搜索了这个，并检查了谷歌，但没有解决方案似乎有所帮助。对不起，如果我的代码有点乱，我会从HTML和CSS

向您展示您需要的部分

HTML

<div id="nav">
    <ul>
            <li><a href="Home.html"><b><font size="5">Home</font></b></a></li>
            <li><a href="About.html"><b><font size="5">About</font></b></a></li>
            <li><a href="ContactUs.html"><b><font size="5">Contact Us</font></b></a></li>
    </ul>
</div>

CSS

#nav {
    /*width: 200px;*/
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: linear-gradient(to bottom, white 10%, #2E3E9F 90%);
}

li{
    float: left;
}

li a{
    display: block;
    background-color: white;
    text-align: center;
    color: grey;
    padding: 14px 16px;
    text-decoration: none;
    border: 1px solid black;
}

li a:hover{
    background-color: grey;
    color: white;
}

Answer 1

试试这个，虽然使用!important并不好。（镀铬）

＆＃13;

  #nav {
  /*width: 200px;*/
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: linear-gradient(to bottom, white 10%, #2E3E9F 90%);
}

li {
  float: left;
}

li a {
  display: block;
  background-color: white;
  text-align: center;
  color: grey;
  padding: 14px 16px;
  text-decoration: none;
  border: 1px solid black;
}

li a:hover {
  background-color: grey !important;
  color: white !important;

＆＃13;

<div id="nav">
  <ul>
    <li><a href="Home.html"><b><font size="5">Home</font></b></a></li>
    <li><a href="About.html"><b><font size="5">About</font></b></a></li>
    <li><a href="ContactUs.html"><b><font size="5">Contact Us</font></b></a></li>
  </ul>
</div>

＆＃13;

将鼠标悬停在CSS上不适用于我的导航栏

1 个答案: