Sub-menu's border is not left aligned with parent's?

Question

Why the sub-menu's border is not left aligned with its parent?

Here is the 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;
}

I saw many samples and all sub-menus are left aligned with their parents. Something's wrong with my code?

Answer 1

The reason is you have border on a parent and one of its children, and as the parents border is outside the content area, the child's border will not align being inside the content area.

Put the border on the anchor, see below sample, or use a pseudo on your parent, which shows a border on hover.

 #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; } 

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

Answer 2

Thanx to sunil.. You can use -0.6px rather then -1px for #su-top-header .su-dropdown-content and you will get desired output in any screen.

#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;
}

Check here