1

我有一个菜单，我想在左边使用边框，但这是我想要的外观，我可以添加边框，但它将占用 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/

4

5 回答 5

5

将 padding-top 和 bottom 添加到锚点，而不是 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;
}

在这里检查。

于 2013-09-30T07:37:43.673 回答
5

尝试这个....

<!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>
于 2013-09-30T08:23:35.730 回答
0

像这样

演示

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;
}
于 2013-09-30T07:31:26.547 回答
0

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

 background:url(line.png) bottom right no-repeat;
于 2013-09-30T07:36:35.457 回答
0

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

HTML

<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>

CSS

.wrapper{
    background: #f1f1f1;
    width: 100%;
    border-top: 5px solid #d1b792;
    border-bottom: 5px solid #d1b792;
    padding-bottom: 1px;
}
.nav li{
    display: inline-block;
    margin-left: -4px;
}
.nav li a{
    display: block;
    font-size: 18px;
    padding: 0px 12px 3px 12px;
    margin: 5px 0;
    color: #666694;
    line-height: 12px;
    border-right: 2px solid #4679BD;
    text-decoration: none;
}
.nav li a:hover{
    color: darkblue;
}
.nav li:last-child a{
    border-right: none;
}

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

于 2015-11-04T22:20:44.067 回答