Question

这是js小提琴：http://jsfiddle.net/7dbemt0k/ 我使用下面的代码制作分隔符。

box-shadow: 1px  0 #111111, 
                2px  0 #777777;

但是我希望它更长，从最顶部到底部越过border -bottom。如何增加长度或者我应该使用类似垂直

标签的东西？请指教。谢谢。

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>
        <a href="<?php echo $data['config']['SITE_DIR']; ?>/main/page/about-us">About Us</a>
        <ul>
            <li>
                <a href="<?php echo $data['config']['SITE_DIR']; ?>/main/page/the-centre-point-of-any-web-projects">Centre-Point of Web Projects</a>
            </li>
        </ul>
    </li>
    <li>
        <a href="<?php echo $data['config']['SITE_DIR']; ?>/member/branch/index">Branches</a>
        <?php Core::getHook('block-branches'); ?>
    </li>
    <li>
        <a href="<?php echo $data['config']['SITE_DIR']; ?>/main/news">News</a>
    </li>
    <li>
        <a href="<?php echo $data['config']['SITE_DIR']; ?>/main/event">Events</a>
    </li>
    <li>
        <a href="<?php echo $data['config']['SITE_DIR']; ?>/contact">Contact Us</a>
    </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

从padding: 10px 0 0 0;移除.sf-menu并将padding上的.sf-menu li更改为padding: 10px 0;

FIDDLE

<强>更新

由于box-shadow超出了元素的自然宽度，您只需使用li

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

我不太明白你的问题，但你提到你想增加垂直分隔线，你只需要设置li的高度

如何使border-right更长，作为菜单的<li>分隔符？</li>

2 个答案: