Question

我正在尝试创建一个基本的导航菜单。我使用：hover属性为菜单中的选项创建了一个导航菜单。但是，我将当前页面设置为活动页面，并且我不希望菜单栏上的活动页面像其他选项一样突出显示。

我已经尽一切努力使它正常工作。请帮忙！

/* Main Navigation Menu */
ul#main-menu {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #336699;
}
li {
  float: right;
}
li a, .menu-drop-btn {
  display: inline-block;
  color: white;
  padding: 15px;
  text-decoration: none;
}

/* li a:hover, .menu-drop-btn:hover .menu-drop-btn{
  background-color: #6699cc;
  cursor: pointer;
} */
li a:hover, :not(.menuactive #active):hover {
  background-color: #6699cc;
  cursor: pointer;
}
/* #active:hover {
  background-color: #336600;
  cursor: pointer;
} */

li.menu-drop-btn {
  display: inline-block;
}
.menu-drop-content {
  display: none;
  position: absolute;
  background-color: #003300;
  min-width: 160px;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.3)
}
.menu-drop-content a {
  color: white;
  padding: 15px 15px 0 0;
  display: block;
  text-align: left;
}
.menu-dropdown:hover .menu-drop-content {
  display: block;
}
.menu-drop-content a:hover {
  background-color: #6699cc;
}
.menu-active {
  float: left;
  background-color: #336600;
}

/* Body and Background */
body {
  background-color: #ffcc80;
  height: 200vh;
}

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="main.css"  />
  </head>
  <body>
    <ul id="main-menu">
      <li class="menu-active" id="active"><a>Home</a></li>
      <li><a>Contact</a></li>
      <li class="menu-dropdown"><a class="menu-drop-btn">Portfolio</a>
          <div class="menu-drop-content">
            <a>Link 1</a>
            <a>Link 2</a>
            <a>Link 3</a>
          </div></li>
      <li><a>About Us</a></li>
    </ul>
    <div>
      <h1>Testing testing...</h1>
    </div>
  </body>
</html>

Answer 1

我建议将:not过滤器移至列表项。这似乎可行：

li:not(#active) a:hover {
  background-color: #6699cc;
  cursor: pointer;
}

规则的编写方式如下：选择不 ID为“活动”的列表项的子项（后代）的任何锚点元素的悬停“事件”

像这样：

/* Main Navigation Menu */
ul#main-menu {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #336699;
}
li {
  float: right;
}
li a, .menu-drop-btn {
  display: inline-block;
  color: white;
  padding: 15px;
  text-decoration: none;
}

/* This is the change that seems to work */
li:not(#active) a:hover {
  background-color: #6699cc;
  cursor: pointer;
}

li.menu-drop-btn {
  display: inline-block;
}
.menu-drop-content {
  display: none;
  position: absolute;
  background-color: #003300;
  min-width: 160px;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.3)
}
.menu-drop-content a {
  color: white;
  padding: 15px 15px 0 0;
  display: block;
  text-align: left;
}
.menu-dropdown:hover .menu-drop-content {
  display: block;
}
.menu-drop-content a:hover {
  background-color: #6699cc;
}
.menu-active {
  float: left;
  background-color: #336600;
}

/* Body and Background */
body {
  background-color: #ffcc80;
  height: 200vh;
}

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="main.css"  />
  </head>
  <body>
    <ul id="main-menu">
      <li class="menu-active" id="active"><a>Home</a></li>
      <li><a>Contact</a></li>
      <li class="menu-dropdown"><a class="menu-drop-btn">Portfolio</a>
          <div class="menu-drop-content">
            <a>Link 1</a>
            <a>Link 2</a>
            <a>Link 3</a>
          </div></li>
      <li><a>About Us</a></li>
    </ul>
    <div>
      <h1>Testing testing...</h1>
    </div>
  </body>
</html>

导航菜单-突出显示选择，但不显示活动页面

1 个答案: