我有一个菜单，我想使用左边的边框，但这里是我想要的外观，我可以添加边框，但它会占用li元素的全部高度，而且我不希望该边框出现在子菜单上
示例：aunipark.in
这是我的代码：
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/
最佳答案
试试这个。。。。
<!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>
关于html - 为菜单li元素添加边框线，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/19088615/