jquery - 如何为下拉菜单制作 CSS 边框？-6ren

jquery - 如何为下拉菜单制作 CSS 边框？

转载作者：行者123 更新时间：2023-11-28 01:28:19

如何为下拉菜单和导航栏制作 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" 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 选择器。

您可能还会发现您需要使用 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 也会影响边框的位置。

关于jquery - 如何为下拉菜单制作 CSS 边框？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31213483/