子菜单的边框未与父母对齐?

时间:2016-05-14 06:58:51

标签: html css

为什么子菜单的边框没有与其父对齐?

以下是Code

HTML

<nav id="su-top-header">
          <ul>
              <li><a href="#">Home</a></li>
              <li class="su-dropdown-menu">
                  <a href="#">Question &#9662;</a>
                  <ul class="su-dropdown-content">
                      <li><a href="/">About us</a></li>
                      <li><a href="/">About our product</a></li>
                      <li><a href="/">About our services</a></li>
                  </ul>
              </li>
              <li>
                  <a href="#">Application</a>
              </li>
          </ul>
      </nav>

CSS

#su-top-header {
    font-size: 0.9em;
    border-bottom: 1px solid #ccc;
}

#su-top-header ul {
    display: block;
    list-style: inside none;
}

#su-top-header > ul > li {
    display: inline-block;
}

#su-top-header ul a {
    text-decoration: none;
    color: #999;
    padding: 5px 15px;
    display: inline-block;
}

.su-dropdown-menu {
    position: relative;
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
    border-bottom: 1px solid transparent;
}

.su-dropdown-menu:hover {
    background-color: #fff;
    border-left-color: #ccc;
    border-right-color: #ccc;
    border-bottom-color: #fff;
}

#su-top-header .su-dropdown-content {
    display: none;
    padding: 0;
    position: absolute;
    left: 0;
    background: #fff;
    text-align: left;
    border: 1px solid #ccc;
    border-top: 0;
}

.su-dropdown-content li{
    white-space: nowrap;
    display: block;
}

.su-dropdown-content li:hover{
    background-color: bisque;
}

.su-dropdown-content li a{
    display: block;   
}

#su-top-header .su-dropdown-menu:hover .su-dropdown-content {
    display: block;
}

我看到很多样本,所有子菜单都与父母一起left aligned。 我的代码出了什么问题?

2 个答案:

答案 0 :(得分:1)

原因是您在父级和其中一个子级上有边框,并且由于父级边框位于内容区域之外,因此子级边框不会在内容区域内对齐。

将边框放在锚点上,请参见下面的示例,或在父级上使用伪,在悬停时显示边框。

&#13;
&#13;
#su-top-header {
    font-size: 0.9em;
    border-bottom: 1px solid #ccc;
}

#su-top-header ul {
    display: block;
    list-style: inside none;
}

#su-top-header > ul > li {
    display: inline-block;
}

#su-top-header ul a {
    text-decoration: none;
    color: #999;
    padding: 5px 15px;
    display: inline-block;
}

.su-dropdown-menu {
    position: relative;
}

.su-dropdown-menu > a {
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
    border-bottom: 1px solid transparent;
}

.su-dropdown-menu:hover > a {
    background-color: #fff;
    border-left-color: #ccc;
    border-right-color: #ccc;
    border-bottom-color: #fff;
}

#su-top-header .su-dropdown-content {
    display: none;
    padding: 0;
    position: absolute;
    left: 0;
    background: #fff;
    text-align: left;
    border: 1px solid #ccc;
    border-top: 0;
}

.su-dropdown-content li{
    white-space: nowrap;
    display: block;
}

.su-dropdown-content li:hover{
    background-color: bisque;
}

.su-dropdown-content li a{
    display: block;   
}

#su-top-header .su-dropdown-menu:hover .su-dropdown-content {
    display: block;
}
&#13;
<nav id="su-top-header">
  <ul>
    <li><a href="#">Home</a></li>
    <li class="su-dropdown-menu">
      <a href="#">Question &#9662;</a>
      <ul class="su-dropdown-content">
        <li><a href="/">About us</a></li>
        <li><a href="/">About our product</a></li>
        <li><a href="/">About our services</a></li>
      </ul>
    </li>
    <li>
      <a href="#">Application</a>
    </li>
  </ul>
</nav>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

Thanx to sunil ..你可以使用-0.6px而不是-1px#su-top-header .su-dropdown-content,你可以在任何屏幕上获得所需的输出。

#su-top-header .su-dropdown-content {
    display: none;
    padding: 0;
    position: absolute;
    left: -0.6px;
    background: #fff;
    text-align: left;
    border: 1px solid #ccc;
    border-top: 0;
}

检查here