[英]CSS Dropdown Menu with Border & z-index
我在這里擺弄一個小提琴: https : //jsfiddle.net/vjdz8kxr/
<div class="span-8 last" id="primary_nav_wrap">
<ul>
<li>
<a href="http://example.com/" class="home">Home</a>
</li>
<li><a href="http://example.com/kb">Knowledge</a>
<ul>
<li><a href="http://example.com/kb1">kb1</a></li>
<li><a href="http://example.com/kb2">kb2</a></li>
<li><a href="http://example.com/kb3">kb3</a></li>
</ul>
</li>
<li><a href="http://example.com/forums">Forums</a>
<ul>
<li><a href="http://example.com/forum1">forum1</a></li>
<li><a href="http://example.com/forum2">forum2</a></li>
<li><a href="http://example.com/forum3">forum3</a></li>
</ul>
</li>
<li><a href="http://example.com/pure_groups">Groups</a>
<ul>
<li><a href="http://example.com/group1">group1</a></li>
<li><a href="http://example.com/group2">group2</a></li>
<li><a href="http://example.com/group3">group3</a></li>
</ul>
</li>
<li><a href="http://example.com/blog">Blogs</a>
<ul>
<li><a href="http://example.com/blog1">blog1</a></li>
<li><a href="http://example.com/blog2">blog2</a></li>
<li><a href="http://example.com/blog3">blog3</a></li>
</ul>
</li>
</ul>
#primary_nav_wrap { float:right; }
#primary_nav_wrap ul { list-style:none; margin:0; padding:0; text-transform: uppercase; }
#primary_nav_wrap ul a { display:block; color:#666666; text-decoration:none; font-weight:600; font-size:14px; line-height:30px; padding:0 15px; font-family:proxima-nova,sans-serif;}
#primary_nav_wrap ul li { float:left; padding:2px; }
#primary_nav_wrap ul li:hover {padding:0; border: 2px solid #efefef; border-bottom:2px solid #ee6129; position:relative; z-index:5; }
#primary_nav_wrap #home ul li:hover {border:2px solid #efefef; border-bottom:2px solid #efefef;}
#primary_nav_wrap ul ul { display:none; position:absolute; left:0; background:#fff; text-transform:none; border:2px solid #efefef; margin-left:-2px; margin-top:0; z-index:-1;}
#primary_nav_wrap ul li:nth-last-child(1) ul { left:-101px;} /* Right Most Menu will pop to left so it doesn't bleed off page*/
#primary_nav_wrap ul ul li {float:none; width:220px; text-align:left;}
#primary_nav_wrap ul ul li:hover {background: #ee6129; text-align:left; border:none; padding:2px; }
#primary_nav_wrap ul ul a { line-height:120%; padding: 5px;}
#primary_nav_wrap ul ul ul { top:0; left:100% }
#primary_nav_wrap ul li:hover > ul { display:block}
基本上,我正在嘗試在下拉菜單周圍制作邊框,減去主菜單標題下存在的邊框部分。 在這種情況下,我將該行設置為橙色,因此很明顯是否有效。
我期望的是,橙色線將顯示在灰色頂部,並且具有我已設置的z索引。 我還假設由於元素具有絕對或相對的位置,因此這應該起作用。
有人可以在這里看到我做錯了嗎?
這是一個假設顏色基本保持不變的解決方案。
移除主菜單li:hover上的邊框底部(橙色)(border-bottom:none)
同時從該CSS規則中刪除5的z-index
向選擇器添加白色背景。
為您的孩子添加一個負的頁邊距頂部(子菜單)。 您添加了負的左邊距,但沒有負的頂部。
或只是遵循此: https : //jsfiddle.net/vjdz8kxr/6/
#primary_nav_wrap ul li:hover {padding:0; border: 2px solid #efefef; border-bottom:none; position:relative; background:white;}
#primary_nav_wrap ul ul { display:none; position:absolute; left:0; background:#fff; text-transform:none; border:2px solid #efefef; margin-left:-2px; margin-top:-2px; z-index:-1;}
編輯:
補充一點說明:如果您有父母,則希望父母出現在孩子的后面,則父母不能有z-index聲明AT ALL。 即使是負面的。 這是一些證明: http : //codepen.io/tylerism/pen/NGNxWR
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.