ipkiss ipkiss - 6 months ago 9
HTML Question

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

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

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>