Question

与mutli-drop菜单搏斗。（97％工作）选择美国1菜单，然后选择内华达菜单项。底部有一个灰色条。同样适用于美国 - ＆gt;加利福尼亚。在洛杉矶下面的灰色酒吧。我已经玩了一段时间的边距和填充。：悬停我希望能突出整个li部分。＆＃34;似乎＆＃34;除了最底层菜单项以外的所有项目。（顺便说一句：美国 - ＆gt;加利福尼亚 - ＆gt;旧金山 - ＆gt; 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>

Answer 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>

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

1 个答案: