How do you make a CSS border for a dropdown menu and nav bar, like this: http://www.imagebam.com/image/15dde2419557895
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.
My code is
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>
