CSS Multi-Drop 菜单：如何摆脱底部边框？答案

【问题标题】：CSS Multi-Drop menu: How can I get rid of bottom border?CSS Multi-Drop 菜单：如何摆脱底部边框？
【发布时间】：2016-10-30 02:20:55
【问题描述】：

与多重下拉菜单搏斗。（97% 工作）选择 United States 1 menu，然后选择 Nevada menu item。底部有一个灰色条。美国 -> 加利福尼亚州也是如此。洛杉矶下方的灰色条。我已经玩了一段时间的边距和填充。 :hover 我希望能突出显示整个 li 部分。 “似乎”适用于除大多数底部菜单项之外的所有菜单项。（顺便说一句：美国 -> 加利福尼亚 -> 旧金山 -> SOMA。你会看到左上角不太接触。这可能是相关的。）
欢迎任何提示。谢谢。米尔顿。

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8">
        <title></title>

<style>

#nav_wrapper  {   

    margin-top: 20px;
    background: #b3c2bf; /* BG color across screen */
}

#nav_wrapper ul 
{               
                list-style:none;
    margin: 0;
    padding: 0;

    background: #b3c2bf; /* BG color across screen */
}

#nav_wrapper ul li
{
    display: inline-block;
    position:relative;
    margin:   0;
    padding: 0;

    min-width:  150px;
    max-width: 150px;      
                text-align: left;
}


#nav_wrapper ul li a
{
    display: block;     

    /* white here gives the text white color */
                 color: white;

    font-family: Arial, sans-serif;
    font-weight: 200;
    font-size: 16px;

    text-decoration:none;
    padding: 0;
    margin 0;
}


#nav_wrapper ul ul
{
    display:none;
    position:absolute;
    top: 100%;          /* 100% of height of the li element */
    padding: 0;
    margin 0;
}

#nav_wrapper ul ul a
{
    line-height: 120%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#nav_wrapper ul ul ul  { 
    top: 0;
    left:100%;
}

p.menutextpadder {   padding-left: 12px;  padding-top: 4px;  padding-bottom: 4px;  }

#nav_wrapper ul li:hover > ul  { display:block;  }
#nav_wrapper  ul li:hover       {  background-color: Blue;   color: white;  }


</style>

<body>
<nav id="nav_wrapper">

<ul  class="topmenu">
  <li><a href="#"><p class="menutextpadder">United States 1</a>

    <ul>

      <li class="dir"><a href="#"><p class="menutextpadder">Arizona</p></a></li>
      <li class="dir"><a href="#"><p class="menutextpadder">California</a>
          <ul>
          <li><a href="#"><p class="menutextpadder">San Francisco</a>

    <ul>
        <li><a href="#"><p class="menutextpadder">Pacific Heights</p></a></li>
        <li><a href="#"><p class="menutextpadder">SOMA</a>
                              <ul>
                                      <li class="dir"><a href="#"><p class="menutextpadder">Spear Street</p></a></li>
                                       <li class="dir"><a href="#"><p class="menutextpadder">Moscone Center</a></li>
                              </ul>
                                 </li>
               </ul>
          </li>
        <li><a href="#"><p class="menutextpadder">Los Angeles</p></a></li>
       </ul>
         <li class="dir"><a href="#"><p class="menutextpadder">Nevada</p></a></li>
    </ul>
  </li>

</ul>

</nav>

</body>
</html>

【问题讨论】：

可以请你摆弄一下吗？

标签： css menu

【解决方案1】：

在下面添加css规则

ul{
font-size: 0;
}

下面的片段

#nav_wrapper {
  margin-top: 20px;
  background: #b3c2bf;
  /* BG color across screen */
}
#nav_wrapper ul {
  list-style: none;
  margin: 0;
  padding: 0;
  background: #b3c2bf;
  /* BG color across screen */
}
#nav_wrapper ul li {
  display: inline-block;
  position: relative;
  margin: 0;
  padding: 0;
  min-width: 150px;
  max-width: 150px;
  text-align: left;
}
#nav_wrapper ul li a {
  display: block;
  /* white here gives the text white color */
  color: white;
  font-family: Arial, sans-serif;
  font-weight: 200;
  font-size: 16px;
  text-decoration: none;
  padding: 0;
  margin 0;
}
#nav_wrapper ul ul {
  display: none;
  position: absolute;
  top: 100%;
  /* 100% of height of the li element */
  padding: 0;
  margin 0;
}
#nav_wrapper ul ul a {
  line-height: 120%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#nav_wrapper ul ul ul {
  top: 0;
  left: 100%;
}
p.menutextpadder {
  padding-left: 12px;
  padding-top: 4px;
  padding-bottom: 4px;
}
#nav_wrapper ul li:hover > ul {
  display: block;
}
#nav_wrapper ul li:hover {
  background-color: Blue;
  color: white;
}
#nav_wrapper .menutextpadder {} ul {
  font-size: 0;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title></title>



  <body>
    <nav id="nav_wrapper">
      <ul class="topmenu">
        <li>
          <a href="#">
            <p class="menutextpadder">United States 1</a>
          <ul>
            <li class="dir">
              <a href="#">
                <p class="menutextpadder">Arizona</p>
              </a>
            </li>
            <li class="dir">
              <a href="#">
                <p class="menutextpadder">California</p>
              </a>
              <ul>
                <li>
                  <a href="#">
                    <p class="menutextpadder">San Francisco</a>
                  <ul>
                    <li>
                      <a href="#">
                        <p class="menutextpadder">Pacific Heights</p>
                      </a>
                    </li>
                    <li>
                      <a href="#">
                        <p class="menutextpadder">SOMA</a>
                      <ul>
                        <li class="dir">
                          <a href="#">
                            <p class="menutextpadder">Spear Street</p>
                          </a>
                        </li>
                        <li class="dir">
                          <a href="#">
                            <p class="menutextpadder">Moscone Center</a>
                        </li>
                      </ul>
                    </li>
                  </ul>
                </li>
                <li>
                  <a href="#">
                    <p class="menutextpadder">Los Angeles</p>
                  </a>
                </li>
              </ul>
              <li class="dir">
                <a href="#">
                  <p class="menutextpadder">Nevada</p>
                </a>
              </li>
          </ul>
          </li>
      </ul>

    </nav>

  </body>

</html>

【讨论】：

您好，感谢您的回复。解决方案：我在凌晨 5 点发现了一个使用 CSS 的修复程序。不知道为什么它有效。 Menus 脚下的额外颜色块是由以下原因引起的：溢出：隐藏；如果我把这条线输入/输出，不需要的酒吧来来去去。如果我将它移动到包装文本的
标记也是如此，这样我就可以将文本填充到左侧而不会弄乱
条目。最后一个挑战是改变 :hover 的文本颜色。悬停在 li 框上，需要获取嵌套的或
的句柄并更改颜色，无需使用 JS 或 jQuery。谢谢你的回复。米尔特。