CODEWITHSUNDEEP
htmlcss
Shahil Mohammed
Shahil Mohammed

Reputation: 3868

add border line for menu li element

i've a menu and i would want to use border on left but here is the desired look how i wanted, i am able to add border but it will take full height of the li element and also i do not want that border to appear on sub menus

example : aunipark.in

enter image description here

here is my code :

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

and also the fiddle : jsfiddle.net/p7Nsf/9/

Upvotes: 1

Views: 36845

Answers (5)

Sindhu
Sindhu

Reputation: 473

try this....

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

Upvotes: 5

johannesMatevosyan
johannesMatevosyan

Reputation: 2208

This might be helpfull, I usually handle border lines in navigation with the help of "line-height" property, it allows to control the height borders from left or right sides. In other words you can change the height of a left/right border by changeing "line-height" property.

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

Here is the Fiddle: http://jsfiddle.net/johannesMt/Lt143z8x/

Upvotes: 0

GreyRoofPigeon
GreyRoofPigeon

Reputation: 18123

Add the padding-top and bottom not to the anchor, but to the li. And give the anchor a border-right:

.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;
}

Check here.

Upvotes: 5

Cypho
Cypho

Reputation: 103

The border will always be as tall as the element, but you can draw a line and apply it to all the elements with

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

Upvotes: 0

Falguni Panchal
Falguni Panchal

Reputation: 8981

Like this

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

Upvotes: 0

Related Questions