Bootstrap导航栏自定义

Question

我正在开发一个Bootstrap网站，我发现一个网站有我喜欢的导航栏设计。但是我不知道他们是如何制作的，或者是否可以在Bootstrap制作。

我不需要完全相同的设计，但这是我想要达到的目标。 1.导航栏中项目之间的垂直线。 2.当鼠标悬停在导航栏中的某个项目上时，下拉菜单（不是那些单词的对齐）将始终与左侧的父菜单对齐。

该网站为here。 非常感谢！

Answer 1

对于导航栏中项目之间的垂直线，您需要执行

正如您所看到的，他们在#mainnav＆gt; li元素上有一个图像，

#mainnav>li {
background: url('../images/separator_medium.png') top left no-repeat;
float: left;
height: 68px;
padding: 0 1px;
position: relative;
z-index: 999;
list-style-type: none;
}

但是你可以用css来做，找到你的选择器（如果你不知道哪一个它给我链接到你的项目） 并做

#mainnav>li {
border-width: 1px;
border-style: solid;
-webkit-border-image: -webkit-gradient(linear, 0 0, 0 100%, from(black), to(rgba(0, 0, 0, 0))) 1 100%;
-webkit-border-image: -webkit-linear-gradient(black, rgba(0, 0, 0, 0)) 1 100%;
-moz-border-image: -moz-linear-gradient(black, rgba(0, 0, 0, 0)) 1 100%;
-o-border-image: -o-linear-gradient(black, rgba(0, 0, 0, 0)) 1 100%;
border-image: linear-gradient(to bottom, black, rgba(0, 0, 0, 0)) 1 100%;
}

如果你不想让最后一个元素有一个“行”，只需使用第n个：last-child选择器

对于你的第二个问题，给下拉菜单一个绝对位置，这是他们的CSS，只是适应你的：

#mainnav .hover-nav {
display: none;
border: 5px solid #eee;
position: absolute;
top: 57px;
left: 1px;
background: #fff;
-webkit-box-shadow: 5px 5px 10px 0 #333;
-moz-box-shadow: 5px 5px 10px 0 #333;
box-shadow: 5px 5px 10px 0 #333;
-ms-filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4,Direction=135,Color='#333333');
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4,Direction=135,Color='#333333');
width: auto;
min-width: 200px;
padding: 5px;
z-index: 998;
}

但我建议学习如何使用开发工具，他们可以告诉你关于htmland css所需的一切