仅突出显示菜单项

Question

我想知道如何突出显示以下下拉菜单中的每个菜单项。当我用鼠标悬停在当前菜单上时，它突出显示|人物也在他们旁边。我怎么解决这个问题？谢谢你的所有信息。 html代码是：

＆＃13;

＆＃13;

#menu {
  width: 960px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  position: relative;
  z-index: 1;
}
#primary_nav_wrap {
  margin-left: auto;
  margin-right: auto;
  margin-top: 5px;
  text-align: center;
  /*margin-left:50px; */
}
#primary_nav_wrap ul {
  list-style: none;
  position: relative;
  /*float:left;*/
  text-align: center;
  margin: 0;
  padding: 0;
}
#primary_nav_wrap ul a {
  /*display:block;*/
  color: #333;
  text-decoration: none;
  font-weight: 500;
  font-size: 14px;
  text-transform: uppercase;
  line-height: 32px;
  padding-top: 10px;
  font-family: 'Raleway', sans-serif;
  display: inline-block;
}
#primary_nav_wrap ul li {
  display: inline-block;
  position: relative;
  /*float:left;*/
  margin: 0px;
  padding: 0px;
}
#primary_nav_wrap ul li a {}
#primary_nav_wrap ul li a:after {
  margin-left: 10px;
  margin-right: 10px;
  content: " | ";
}
#primary_nav_wrap ul li.last a:after {
  content: none !important;
}
#primary_nav_wrap ul li li.submenu a:after {
  content: none !important;
}
#primary_nav_wrap ul li a:hover {
  background: #f6f6f6;
}
#primary_nav_wrap ul ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  opacity: .8;
  padding: 0;
}
#primary_nav_wrap ul ul li {
  float: none;
  text-align: left;
  width: 200px;
}
#primary_nav_wrap ul ul a {
  line-height: 120%;
  padding: 10px 15px;
}
#primary_nav_wrap ul ul ul {
  top: 0;
  left: 100%;
}
#primary_nav_wrap ul li:hover ul {
  display: inline-block;
}

＆＃13;

<div id="menu">
  <nav id="primary_nav_wrap">
    <ul>
      <li class="currentmenuitem"><a href="#">Home</a>
      </li>
      <li><a href="#">about us</a>
      </li>
      <li><a href="#">day course</a>
        <ul>
          <li class="submenu"><a href="#">3 Day Course</a>
          </li>
          <li class="submenu"><a href="#">6 Day Course</a>
          </li>
        </ul>
      </li>
      <li><a href="#">short course</a>
        <ul>
          <li class="submenu"><a href="#">Pasta course</a>
          </li>
          <li class="submenu"><a href="#">Pizza course</a>
          </li>
          <li class="submenu"><a href="#">Fettucine course</a>
          </li>
        </ul>
      </li>
      <li><a href="#">Tours</a>
      </li>
      <li><a href="#">recipes</a>
      </li>
      <li><a href="#">reviews</a>
      </li>
      <li><a href="#">Contact Us</a>
      </li>
      <li class="last"><a href="#">Location</a>
      </li>
    </ul>
  </nav>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

将伪元素的展示位置从a更改为li。对所有定位a。

的CSS选择器执行此操作

将#primary_nav_wrap ul li a:after {}更新为#primary_nav_wrap ul li:after {}

下面是一个菜单示例，其中包含改进的标记和减少的CSS（很多CSS属性的重叠，不需要）。

＆＃13;

＆＃13;

#menu {
  width: 960px;
  margin-left: auto;
  margin-right: auto;
}
#primary_nav_wrap ul,
#primary_nav_wrap li {
  margin: 0;
  padding: 0;
  list-style: none;
}
#primary_nav_wrap li {
  display: inline-block;
  position: relative;
}
#primary_nav_wrap a {
  color: #333;
  text-decoration: none;
  font-weight: 500;
  font-size: 14px;
  text-transform: uppercase;
  line-height: 32px;
  font-family: 'Raleway', sans-serif;
  display: inline-block;
}
#primary_nav_wrap a:hover {
  background: #f6f6f6;
}
#primary_nav_wrap ul > li:after {
  margin-left: 10px;
  margin-right: 10px;
  content: " | ";
}
#primary_nav_wrap ul > li:hover .submenu {
  display: block;
}
#primary_nav_wrap .submenu > li {
  float: none;
  text-align: left;
  width: 200px;
}
#primary_nav_wrap .submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  opacity: .8;
  padding: 0;
}
#primary_nav_wrap ul > li.last:after,
#primary_nav_wrap .submenu > li:after {
  content: none !important;
}
#primary_nav_wrap .submenu a {
  line-height: 120%;
  padding: 10px 15px;
}

＆＃13;

<div id="menu">
  <nav id="primary_nav_wrap">
    <ul>
      <li class="currentmenuitem"><a href="#">Home</a>
      </li>
      <li><a href="#">about us</a>
      </li>
      <li><a href="#">day course</a>
        <ul class="submenu">
          <li><a href="#">3 Day Course</a>
          </li>
          <li><a href="#">6 Day Course</a>
          </li>
        </ul>
      </li>
      <li><a href="#">short course</a>
        <ul class="submenu">
          <li><a href="#">Pasta course</a>
          </li>
          <li><a href="#">Pizza course</a>
          </li>
          <li><a href="#">Fettucine course</a>
          </li>
        </ul>
      </li>
      <li><a href="#">Tours</a>
      </li>
      <li><a href="#">recipes</a>
      </li>
      <li><a href="#">reviews</a>
      </li>
      <li><a href="#">Contact Us</a>
      </li>
      <li class="last"><a href="#">Location</a>
      </li>
    </ul>
  </nav>
</div>

＆＃13;

＆＃13;

＆＃13;