Html 引导导航栏自定义

我正在开发一个引导网站，我发现一个网站有我喜欢的导航栏设计。但我不知道他们是怎么做到的，也不知道是否有可能在Bootstrap中做到

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

该网站是。

---

非常感谢

为1。您需要在导航栏中执行的项目之间的垂直线

正如您所见，它们在#mainnav>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，找到你的选择器（如果你不知道是哪一个，给我你项目的链接） 做

如果不希望最后一个元素有“行”，只需使用第n个：最后一个子选择器

对于你的第二个问题，给下拉菜单一个绝对位置，这是他们的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的所有信息

您找到这个导航栏的网站链接是什么？使用开发人员工具查看该网站的css和html。@SimpleSandman，@ShuruiLiu--Bootstrap只是css，您可以重新设置它的样式以匹配，至少对我来说会更容易，不使用引导的导航栏，只使用它们的下拉菜单或使用另一个菜单系统，如superclick（superfish的click版本）。

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