How to make a CSS border for a dropdown menu?

2019-07-12 08:08发布

站内问答 / jQuery
1592 1 4

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>

1条回答
Evening l夕情丶
2楼-- · 2019-07-12 08:47

You need to use border-bottom ...

.element {
    border-bottom: 1px solid #555;
}

... will be pretty close to the example in the linked image, where .element is the css selector for your dropdown menu items.

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 */
}

Bear in mind line-height will also effect the position of the border.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)