这是我工作过的jsfiddle:http : //jsfiddle.net/nalinc/rym2zku1/9/
nav ul,
nav ol {
list-style: none;
margin: 0;
padding: 0;
}
.nav-item ul {
padding: inherit;
border: 1px solid black;
text-align: left;
border-radius: 4px;
}
.nav-item ul li:hover {
background-color: #d1d1d1;
}
.nav-bar {
text-align: center;
}
@media screen and (min-width: 769px) {
.nav-bar--left {
display: table;
table-layout: fixed;
width: 100%;
text-align: left;
}
.nav-bar--left .grid-item {
float: none;
display: table-cell;
vertical-align: middle;
}
}
#nav {
position: relative;
display: block;
list-style-type: none;
padding: 0;
margin: 20px 0;
font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", sans-serif;
white-space: nowrap;
}
.nav-bar--left #nav {
margin: 1em 0 0;
text-align: right;
}
@media screen and (max-width: 768px) {
#nav,
.nav-bar--left #nav {
width: 100%;
white-space: normal;
margin: 20px 0 10px;
text-align: inherit;
}
}
.nav-item {
position: relative;
display: inline-block;
padding: 2px 30px;
}
@media screen and (max-width: 768px) {
.nav-item {
padding: 10px 20px;
}
}
#nav>.nav-item {
border-left: 1px solid #e8e8e8;
}
#nav>.nav-item.first {
border-left: none;
padding-left: 0;
}
@media screen and (max-width: 768px) {
#nav>.nav-item {
border: 0 none;
}
}
.nav-item-link {
display: inline-block;
color: #211f1f;
font-size: 14px;
zoom: 1;
*display: inline;
}
.nav-item-link:hover {
color: #333;
}
.nav-item-link .nav-item.active .nav-item-link {
color: #333333;
}
.sub-nav .sub-nav {
display: none !important;
}
.supports-no-csstransforms .sub-nav {
white-space: normal;
width: 200px;
margin-left: -100px;
}
.sub-nav:before {
content: '';
display: block;
position: absolute;
top: 5px;
right: 47%;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid #211f1f;
z-index: 40;
}
.sub-nav-item,
#moreMenu--list .nav-item {
display: block;
overflow: hidden;
padding: 0;
margin: 0;
background-color: #211f1f;
}
.sub-nav-item.first,
#moreMenu--list .nav-item:first-child {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
.sub-nav-item.last,
#moreMenu--list .nav-item:last-child {
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
}
.sub-nav-item-link,
#moreMenu--list .nav-item .nav-item-link {
display: block;
padding: 15px 20px;
margin: 0;
color: #ffffff;
text-align: center;
border-top: 1px solid #0b0a0a;
}
.sub-nav-item-link.first,
.sub-nav-item-link:first-child,
#moreMenu--list .nav-item .nav-item-link.first,
#moreMenu--list .nav-item .nav-item-link:first-child {
border-top: none;
}
.sub-nav-item-link:hover,
.sub-nav-item-link:focus,
#moreMenu--list .nav-item .nav-item-link:hover,
#moreMenu--list .nav-item .nav-item-link:focus {
color: #ffffff;
border-top: 1px solid #0b0a0a;
background-color: #0b0a0a;
}
.sub-nav-item-link:hover.first,
.sub-nav-item-link:hover:first-child,
.sub-nav-item-link:focus.first,
.sub-nav-item-link:focus:first-child,
#moreMenu--list .nav-item .nav-item-link:hover.first,
#moreMenu--list .nav-item .nav-item-link:hover:first-child,
#moreMenu--list .nav-item .nav-item-link:focus.first,
#moreMenu--list .nav-item .nav-item-link:focus:first-child {
border-top: none;
}
#nav {
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
text-align: center
}
#nav a {
text-decoration: none;
color: #666;
display: inline-block;
padding: 10px;
font-size: 13px;
}
#nav ul {
position: absolute;
top: 100%;
left: 0;
text-align: left;
width: 170px;
border: 1px solid #ccc;
display: none;
}
#nav li:hover ul {
display: block;
}
<nav id="navWrap" role="navigation">
<ul id="nav">
<li class="nav-item first active">
<a class="nav-item-link" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-item-link" href="catalog.html">Catalog</a>
<ul>
<li><a href="#">Data Listing</a></li>
<li><a href="#">Web Scheduling</a></li>
<li><a href="#">Google Maps Application</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-item-link" href="/blogs/news">Blog</a>
</li>
<li class="nav-item">
<a class="nav-item-link" href="/pages/about-us">About Us</a>
</li>
</ul>
</nav>
现在我需要border-left
每个列表。
我需要这样的图像:
当我添加时border-left
,它将会被触摸border-bottom
。
#nav ul {
position: absolute;
top: 100%;
left: 0;
text-align: left;
width: 170px;
border: 1px solid #ccc;
display: none;
}
谁能帮我解决这个问题?提前致谢。
演示:http : //jsfiddle.net/rym2zku1/29/
额外的CSS
.nav-item:not(:last-child) {
-webkit-box-shadow: 10px 0px 0px -9px red;
-moz-box-shadow: 10px 0px 0px -9px red;
box-shadow: 10px 0px 0px -9px red;
}
红色竖条更好地突出了解决方案
结果
说明
我们正在[ab]使用CSSbox-shadow
属性在元素周围绘制部分边框.nav-item
。
CSS的“片段”可以描述如下:
这里的问题是阴影向右微移了10px,但跨度(-9px)与此相反,可以有效地将其“拉回”。这种扩散的减少发生在所有尺寸上,因此我们也从元素的全高获得了9px的“向后拉”。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句