Question

我有一个菜单，我想在左边使用边框，但这里是我想要的想要的外观，我能够添加边框，但它将采取li元素的全高度，我也不希望这样边框显示在子菜单上

示例：aunipark.in

enter image description here

这是我的代码：

HTML

<div class="menudiv">
<div class="menu">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a>
                        <ul>
                        <li><a href="#">School</a></li>
                        <li><a href="#">Vision and Mission </a></li>
                        <li><a href="#">Principal’s desk</a>
                        <li><a href="#">Management</a>
                        </ul> </li>
                <li><a href="#">Admission</a>
                        <ul>
                        <li><a href="#">Overview</a></li>
                        <li><a href="#">Download application form</a></li>
                        </ul> </li>
                <li><a href="#">Gallery</a></li>
                <li><a href="#">School Calander</a></li>
                <li><a href="#">News & Events</a></li>
                <li><a href="#">Career</a></li>
                <li><a href="#">Contact</a></li>               
            </ul>
        </div>
</div>

CSS

.menudiv
{

    width:980px;
}


.menu {
font-family: 'Open Sans', sans-serif;
font-size:14px;



}

.menu ul ul {
        display: none;

    }

.menu ul li:hover > ul {
        display: block;

}

.menu ul {
    background: #111312;
    margin: 0;
    list-style: none;
    position: relative;
    padding: 0;
    border:3px solid #111312;
-moz-border-radius: 3px;
    -webkit-border-radius: 3px;

}
.menu ul:after {
    content: ""; 
    clear: both; 
    display: block;
}

.menu ul li {
    float: left;
    border-bottom: 3px solid transparent;
}
.menu ul li:hover {
    background: #111312;
    border-bottom: 3px solid #fff;
}
.menu ul li:hover a {
    color: #fff;
}

.menu ul li a {
    display: block; 
    padding: 15px;  
    border-right: 3px solid #fff;
    color: #fff; 
    text-decoration: none;
}

.menu ul ul {
    background: #111312;
    padding: 0;
    position: absolute; 
    top: 100%;
}
.menu ul ul li {
    float: none; 
    position: relative;
}
.menu ul ul li a {
    padding: 10px;
    color:#000;
    display: block; 
}   
.menu ul ul li a:hover {
    background: #111312;
    color: #fff;
}

.menu ul ul ul {
    position: absolute; 
    left: 100%; 
    top:0;
    padding: 0;
}

.menu ul ul ul li {
    float: none; 
    border-top: 1px solid #6b727c;
    border-bottom: 1px solid pink; 
    position: relative;
}

.menu ul ul ul li a { 
    padding: 10px;
    color: #fff;
    display: block; 
}

.menu ul ul ul li a:hover {
  background: #95CEF1;
  color: #000;
}

.menu ul ul ul ul {
    position: absolute; 
    left: 100%; 
    top:0;
}

.head
{
   width:500px;
    height:200px;
    background:#789;
}

.foot
{
   width:500px;
    height:200px;
    background:#123;
}

还有小提琴：jsfiddle.net/p7Nsf/9 /

Answer 1

将填充顶部和底部不添加到锚点，而是添加到li。并给锚一个边界右边：

.menu > ul > li > a {
    border-right: 2px solid white;
    display: block;
    padding-left: 25px;
    padding-right: 25px;
}
.menu > ul > li:last-child > a {
    border-right: 0;
}

检查here。

Answer 2

试试这个......

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Style Test</title>
<style type="text/css">
#list { background-color: aqua; }
.horizontal { display: inline; border-left: 2px solid; padding-left: 0.3em; }
.first { border-left: none; padding-left: 0; }
</style>
</head>
<body>
<div id="list">
<div>
<ul>
  <li class="first"><a href="#">Home</a></li>
    <li class="horizontal"><a href="#">About</a>
                    <ul>
                    <li class="first"><a href="#">School</a></li>
                    <li class="horizontal"><a href="#">Vision and Mission </a></li>
                    <li class="horizontal"><a href="#">Principal’s desk</a>
                    <li class="horizontal"><a href="#">Management</a>
                    </ul> </li>
            <li class="horizontal"><a href="#">Admission</a>
                    <ul>
                    <li class="first"><a href="#">Overview</a></li>
                    <li class="horizontal"><a href="#">Download application form</a></li>
                    </ul> </li>
            <li class="horizontal"><a href="#">Gallery</a></li>
            <li class="horizontal"><a href="#">School Calander</a></li>
            <li class="horizontal"><a href="#">News & Events</a></li>
            <li class="horizontal"><a href="#">Career</a></li>
            <li class="horizontal"><a href="#">Contact</a></li>               
        </ul>
    </div>
</div>
</body>
</html>

Answer 3

喜欢这个

<强> demo

<强> CSS

       .menudiv {
    width: 788px;
    margin:0 auto;

}
.menu {
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
}
.menu ul ul {
    display: none;
    margin:4px 0 0 0;
}
.menu ul li:hover > ul {
    display: block;
}
.menu ul {
    background: #111312;
    margin: 0;
    list-style: none;
    position: relative;
    padding: 0;
    border: 3px solid #111312;
    -moz-border-radius: 13px;
    -webkit-border-radius: 13px;
    border-radius:13px;
}
.menu ul:after {
    content: "";
    clear: both;
    display: block;
}
.menu ul li {
    float: left;
    border-bottom: 3px solid transparent;
    border-right: 3px solid #fff;
}
.menu ul li:last-child{
    border:none;
}
}
.menu ul li:hover {
    background: #111312;
    border-bottom: 3px solid #fff;
}
.menu ul li:hover a {
    color: #fff;
}
.menu ul li a {
    display: block;
    padding: 15px;

    color: #fff;
    text-decoration: none;
}
.menu ul ul {
    background: #111312;
    padding: 0;
    position: absolute;
    top: 100%;
}
.menu ul ul li {
    float: none;
    position: relative;
    border-right:none;
}
.menu ul ul li a {
    padding: 10px;
    color: #000;
    display: block;
}
.menu ul ul li a:hover {
    background: #111312;
    color: #fff;
}
.menu ul ul ul {
    position: absolute;
    left: 100%;
    top: 0;
    padding: 0;
}
.menu ul ul ul li {
    float: none;
    border-top: 1px solid #6b727c;
    border-bottom: 1px solid pink;
    position: relative;
}
.menu ul ul ul li a {
    padding: 10px;
    color: #fff;
    display: block;
    text-decoration: none;
}
.menu ul ul ul li a:hover {
    background: #95CEF1;
    color: #000;
}
.menu ul ul ul ul {
    position: absolute;
    left: 100%;
    top: 0;
}
.head {
    width: 500px;
    height: 200px;
    background: #789;
}
.foot {
    width: 500px;
    height: 200px;
    background: #123;
}

Answer 4

边框将始终与元素一样高，但您可以绘制一条线并将其应用于所有元素

 background:url(line.png) bottom right no-repeat;

Answer 5

这可能会有所帮助，我通常在“line-height”属性的帮助下处理导航中的边界线，它允许从左侧或右侧控制高度边框。换句话说，您可以通过更改“line-height”属性来更改左/右边框的高度。

HTML

UPDATE tbl1
SET has_data = 1
WHERE r_num IN (SELECT r_num
                FROM tbl2);

CSS

<div class="wrapper">
    <div class="container">
        <ul class="nav">
            <li><a href="#">My Wishlist</a></li>
            <li><a href="#">My Account</a></li>
            <li><a href="#">My Cart</a></li>
            <li><a href="#">Login</a></li>
        </ul>
    </div>
</div>

这是小提琴：http://jsfiddle.net/johannesMt/Lt143z8x/

为菜单li元素添加边框线

5 个答案: