本文介绍了如何使下拉菜单的CSS边框？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
如何为下拉菜单和导航栏创建CSS边框，如下所示：
How do you make a CSS border for a dropdown menu and nav bar, like this:http://www.imagebam.com/image/15dde2419557895
我刚刚学习了CSS，我一直在寻找如何做到这一点，但是无法找到如何为下拉菜单创建底部边框。
I just learned about CSS, and I've been searching how to do this, but can't find how to make a bottom border for a dropdown menu.
我的代码是
body {
}
.navbar {
border-radius: 0px;
border-width: 0px;
margin-top: 20%;
font-family: "Orator Std";
font-size: 18px;
color: #ffffff;
background-color: #000000;
}
.dropdown-submenu {
position: relative;
}
.dropdown-submenu > .dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px 6px 6px 6px;
border-radius: 0px;
}
.dropdown-submenu:hover > .dropdown-menu {
display: block;
}
.dropdown-submenu > a:after {
display: block;
content:" ";
float: right;
width: 0px;
height: 0px;
border-color: transparent;
border-style: solid;
border-width: 5px 0px 5px 5px;
border-left-color: #cccccc;
margin-top: 5px;
margin-right: -5px;
}
.dropdown-submenu:hover > a:after {
border-left-color: #ffffff;
}
.dropdown-submenu.pull-left {
float: none;
}
.dropdown-submenu.pull-left > .dropdown-menu {
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0px 6px 6px;
-moz-border-radius: 6px 0px 6px 6px;
border-radius: 6px 0px 6px 6px;
}
@media screen and (max-width: 768px) {
.navbar .navbar-collapse a {
text-align: left;
padding-left: 43%;
}
.dropdown-submenu a {
padding-left: 44%;
}
.navbar .navbar-collapse .dropdown .dropdown-menu a {
padding-left: 45%;
}
}
#the-slider img{
width: 100%;
padding-left: 10%;
padding-right: 10%;
padding-top: 10%;
}<body background="">
<nav role="navigation" class="navbar navbar-inverse"> <!-- start navigation button -->
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle"> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button> <a href="#" class="navbar-brand">project</a>
</div>
<!-- Collection of nav links, forms, and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-center">
<li class="#"><a href="#"><B><I>Home</B></I></a>
</li>
<li class="dropdown"> <a data-toggle="dropdown" class="dropdown-toggle" href="#"><B><I>Collection </B></I><b class="caret"></b></a>
<ul role="menu" class="dropdown-menu">
<li><a href="#"><i class="fa fa-envelope-o fa-fw"></i><B><I>All Collection Portfolio</B></I></a>
</li>
<li class="divider"></li>
<li><a href="#"><i class="fa fa-trash-o fa-fw"></i>Collection 1</a>
</li>
<li><a href="#"><i class="fa fa-pencil-square-o fa-fw"></i>Collection 2</a>
</li>
<li><a href="#"><i class="fa fa-paper-plane-o fa-fw"></i>Collection 3</a>
</li>
<li class="divider"></li>
<li><a href="#"><i class="fa fa-trash-o fa-fw"></i>Cita Tenun Indonesia</a>
</li>
</ul>
</li>
<li class="dropdown"> <a data-toggle="dropdown" class="dropdown-toggle" href="#">Things <b class="caret"></b></a>
<ul role="menu" class="dropdown-menu">
<li><a href="#"><i class="fa fa-envelope-o fa-fw"></i> Inbox</a>
</li>
<li><a href="#"><i class="fa fa-pencil-square-o fa-fw"></i> Drafts</a>
</li>
<li><a href="#"><i class="fa fa-paper-plane-o fa-fw"></i> Sent Items</a>
</li>
<li class="divider"></li>
<li><a href="#"><i class="fa fa-trash-o fa-fw"></i> Trash</a>
<li class="dropdown-submenu"> <a tabindex="-1" href="#"><i class="fa fa-hand-o-right fa-fw"></i> Profile</a>
<ul class="dropdown-menu">
<li><a href="#"><i class="fa fa-calendar-o fa-fw"></i> Account</a>
</li>
<li><a href="#"><i class="fa fa-folder-open-o fa-fw"></i> Users</a>
</li>
<li><a href="#"><i class="fa fa-file-o fa-fw"></i> Login</a>
</li>
</ul>
</li>
</li>
</ul>
<li><a href="#">About</a>
</li>
<li><a href="#">Contact us</a>
</li>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Login</a>
</li>
</ul>
</div>
</nav> <!-- end navigation button-->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" align="center"> <!-- start slider -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<div class="carousel-inner"> <!-- picture slider start -->
<div class="item active">
<img src="images/slide-1.jpg" alt="...">
<div class="carousel-caption">
</div>
</div> <!--item 1-->
<div class="item">
<img src="images/slide-2.jpg" alt="...">
<div class="carousel-caption">
</div>
</div> <!--item 2-->
<div class="item"> <!-- picture slider end-->
<img src="images/slide-3.jpg" alt="...">
<div class="carousel-caption">
</div>
</div> <!--item 3-->
</div> <!-- end picture slider-->
</div>
</body>推荐答案
您需要使用 border-bottom ...
.element {
border-bottom: 1px solid #555;
}
...将非常接近链接图像中的示例，其中 .element 是您的下拉菜单项的css选择器。
... will be pretty close to the example in the linked image, where .element is the css selector for your dropdown menu items.
您还可能需要使用padding-底部和页边空白以分隔您的菜单项，并使用所包含的菜单项文本使边框很好地空间，例如：
You may also find you need to use padding-bottom and margin-bottom to space out your menu items and space the border nicely with the contained menu item text, for example:
.element {
border-bottom: 1px solid #555;
margin-bottom: 5px; /* space to next menu item */
padding-bottom: 5px; /* space between text and border bottom */
}
记住 line-height 也会影响边框的位置。
Bear in mind line-height will also effect the position of the border.
这篇关于如何使下拉菜单的CSS边框？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！