[英]make bootstrap menu or sub-menu visible in left side if it's going beyond browser edge
[英]Sub-menu's border is not left aligned with parent's?
為什么子菜單的邊框未與其父菜單對齊?
這是代碼
的HTML
<nav id="su-top-header">
<ul>
<li><a href="#">Home</a></li>
<li class="su-dropdown-menu">
<a href="#">Question ▾</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
。 我的代碼有問題嗎?
原因是您在父級及其子級之一上有邊框,並且由於父級邊框在內容區域之外,因此該子項的邊框在內容區域內不會對齊。
將邊框放在錨點上,請參見下面的示例,或者在父對象上使用偽對象,這將在懸停時顯示邊框。
#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 ▾</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>
謝謝。您可以對-su #su-top-header .su-dropdown-content
使用-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;
}
在這里檢查
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.