サブメニューの境界線が親の境界線と揃っていませんか？

Question

なぜサブメニューの境界線がその親と整列していないのですか？ここで

は、私は多くのサンプルを見て、すべてのサブメニューが両親とleft alignedをしている

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

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です。 コードに何か問題がありますか？

Answer 1

の理由は、あなたが親の境界線を持っており、その子の一つであり、親の境界がコンテンツ領域の外にあるように、子供の境界線は、コンテンツエリア内であること揃わないだろう。

アンカーに境界線を置くか、下のサンプルを参照するか、親に擬似を使用します。これは、ホバー上に境界線を表示します。

#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 .. の代わりに-0.6pxの代わりに-1pxを使用すると、任意の画面に希望の出力が得られます。

#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