How to make border-right longer as <li> divider for menu? - html

Question

Here's the js fiddle : http://jsfiddle.net/7dbemt0k/
I used below code to make divider.
box-shadow: 1px 0 #111111,
2px 0 #777777;
But I want it to be longer, from very top to very bottom across border-bottom.How do I increase the length or shall I use something like vertical tag? Please advise.Thanks.
HTML
<ul class="sf-menu">
<li>
<a href="<?php echo $data['config']['SITE_DIR']; ?>/">
<img src='<?php echo $data['config']['THEME_DIR']."/img/home_1.png"; ?>'></a>
</li>
<li>
About Us
<ul>
<li>
Centre-Point of Web Projects
</li>
</ul>
</li>
<li>
Branches
<?php Core::getHook('block-branches'); ?>
</li>
<li>
News
</li>
<li>
Events
</li>
<li>
Contact Us
</li>
</ul>
<div class="clear"></div>
CSS
/* Main */
.sf-menu {
width: 100%;
margin: 0;
padding: 10px 0 0 0;
list-style: none;
background-color: #2D2D2D;
/*background-image: linear-gradient(#444, #111);*/
border-bottom:6px solid #072438;
/*border-radius: 50px;*/
/* box-shadow: 0 2px 1px #9c9c9c;*/
box-shadow: 2px 1px #393939;
}
.sf-menu li {
float: left;
padding: 0 0 10px 0;
position: relative;
box-shadow: 1px 0 #111111,
2px 0 #777777;
border-bottom:6px solid #393939;
}
.sf-menu a {
float: left;
height: 20px;
padding: 0 25px;
color: #999;
/* text-transform: uppercase;*/
font: bold 12px/25px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
.sf-menu li:hover > a {
color: #fafafa;
}
*html .sf-menu li a:hover { /* IE6 */
color: #fafafa;
}
.sf-menu li:hover > ul {
display: block;
}
/* Sub-menu */
.sf-menu ul {
list-style: none;
margin: 0;
padding: 0;
display: none;
position: absolute;
top: 35px;
left: 0;
z-index: 99999;
background-color: #2D2D2D;
border-bottom:none;
/* background-image: linear-gradient(#444, #111); */
/*-moz-border-radius: 5px;*/
/*border-radius: 5px;*/
}
.sf-menu ul li {
float: none;
margin: 0;
padding: 0;
display: block;
box-shadow: 0 1px 0 #111111,
0 2px 0 #777777;
border-bottom:none;
}
.sf-menu ul li:last-child {
box-shadow: none;
}
.sf-menu ul a {
padding: 10px;
height: auto;
line-height: 1;
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
.sf-menu ul a:hover{
margin-left:10px;
}
*html .sf-menu ul a { /* IE6 */
height: 10px;
width: 150px;
}
*:first-child+html .sf-menu ul a { /* IE7 */
height: 10px;
width: 150px;
}
/* active menu*/
/*end */
.sf-menu ul a:hover {
/*background-color: #0186ba;
background-image: linear-gradient(#04acec, #0186ba);*/
}
.sf-menu ul li:first-child a {
/*border-radius: 5px 5px 0 0;*/
}
.sf-menu ul li:first-child a:after {
content: '';
position: absolute;
left: 30px;
top: -8px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 8px solid #072438;
}
.sf-menu ul li:first-child a:hover:after {
border-bottom-color: #072438;
}
.sf-menu ul li:last-child a {
/*border-radius: 0 0 5px 5px;*/
}
/* Clear floated elements */
.sf-menu:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.sf-menu ul li a:last-child{
box-shadow: 0 0 #111111,
0 0 #777777;
}
* html .sf-menu { zoom: 1; } /* IE6 */
*:first-child+html .sf-menu { zoom: 1; } /* IE7 */

Answer 1

remove padding: 10px 0 0 0; from .sf-menu and change the padding on .sf-menu li to padding: 10px 0;
FIDDLE
UPDATE
Because the box-shadow is outside of the element's natural width you just have to add some spacing to the li's using margin
.sf-menu li {
float: left;
padding: 10px 0;
margin: 0 0 0 2px; <---- //add margin
position: relative;
box-shadow: 1px 0 #111111,
2px 0 #777777;
border-bottom:6px solid #393939;
}
NEW FIDDLE

Answer 2

.sf-menu li {
float: left;
padding: 0 0 10px 0;
position: relative;
box-shadow: 1px 0px #111111,
2px 0 #777777;
border-bottom:6px solid #393939;
**height:40px;**
}
I don't quite understand yr question but u mentioned that u wanted to increase the vertical divider, you just have to set the height of the li