如何为下拉菜单制作 CSS 边框？
Posted
技术标签:
【中文标题】如何为下拉菜单制作 CSS 边框？【英文标题】：How to make a CSS border for a dropdown menu? 【发布时间】：2015-09-21 16:32:51 【问题描述】：如何为下拉菜单和导航栏制作 CSS 边框，如下所示： http://www.imagebam.com/image/15dde2419557895
我刚刚学习了 CSS，我一直在寻找如何做到这一点，但找不到如何为下拉菜单制作底部边框。
我的代码是
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" >
<div class="carousel-caption">
</div>
</div> <!--item 1-->
<div class="item">
<img src="images/slide-2.jpg" >
<div class="carousel-caption">
</div>
</div> <!--item 2-->
<div class="item"> <!-- picture slider end-->
<img src="images/slide-3.jpg" >
<div class="carousel-caption">
</div>
</div> <!--item 3-->
</div> <!-- end picture slider-->
</div>
</body>【问题讨论】：
【参考方案1】：你需要使用border-bottom ...
.element
border-bottom: 1px solid #555;
... 将非常接近链接图像中的示例，其中 .element 是下拉菜单项的 css 选择器。
您可能还会发现需要使用 padding-bottom 和 margin-bottom 来分隔菜单项并使用包含的菜单项文本很好地分隔边框，例如：
.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 也会影响边框的位置。
【讨论】：
先生已经尝试过该方法，没有任何反应，我什至使用 !important 仍然没有显示边框 小姐，请不要，先生！如果您正在使用!important 并且它仍然没有发生，那么几乎可以肯定您的选择器是错误的（也可以想象另一个 !important 会覆盖样式表的下方，但这不太可能） - 记录在案，请避免!important，除非绝对必要以上是关于如何为下拉菜单制作 CSS 边框？的主要内容，如果未能解决你的问题，请参考以下文章
如何为移动屏幕的导航栏项目添加切换按钮，并使用 HTML、CSS 和 Bootstrap v4 将它们切换为下拉菜单