Question

我正在这个网站上工作，我需要制作导航菜单，当你将鼠标放在它们上面时会扩展，并且这些菜单会有白色竖条分隔条目。一直到右边都是搜索的能力。

该网站是：http://www.problemio.com我正在谈论屏幕顶部附近有背景图片的项目，其中包含“问题支持”字样

我有这个div的html：

<div class="nav_bar">
<!-- connect buttons and menu go here -->
    <div class="nav">
        <div class="icons">

        </div>

        <div class="menusystem" id="site_nav">
            <ul class="main_menu_ul">
                <li class="main_menu_li"><a href="http://www.problemio.com/">Support</a>
                </li>

                <li class="main_menu_li"><a href="http://www.problemio.com/">Problems</a> 
                    <ul class="child_menu_ul">
                        <li class="first"><a href="http://www.problemio.com/">Categories</a></li>
                    </ul>
                </li>
            </ul>

            <form  name="form" method="post">
            Search: <input type="text" size="20"></input> 
            <input type="submit" class="button" value="Search"></input>         

    </div>
</div>

我有这个用于nav_bar的css

.nav_bar
{
    background-image: url('http://www.problemio.com/img/ui/problemiomainbluebar.png');
    background-repeat: repeat-x;

    border-bottom: 1px solid #462c1f;
    border-top: 1px solid #462c1f;   

        margin-top: 5px;
}

/* styles for nav_bar: */ 
.nav_bar a
{
    z-index: 20;
    width:100%;
/*  background:#ffce2e; the comehike strip with orange */
/*  background:#2e6ea4; the comehike strip with blue  */

    color: white;   

    position: relative;
}

.nav_bar .nav 
{
    width:60em;
    height: 40px;
    margin: 0 auto;
    position: relative;
    z-index: 20;

}

.nav_bar .icons 
{
    position: absolute;
    left: 0;
    display: inline-block;
}

.nav_bar .icons div 
{
    display: inline-block;
    position: relative; 
    top: 10px;
    float:left;
}

.nav_bar .nav #site_nav 
{
    position: absolute;
    right: 0.5em;
    top: 0.2em;
    z-index: 20;
}

以及构成下拉列表的

部分的css：

.menusystem 
{
    position: absolute;
    font-size: 1em;
}

.menusystem ul, .menusystem li 
{
    margin: 0;
    padding: 0;
}
.menusystem li 
{
    list-style: none outside none;
}

.menusystem ul 
{
    list-style: none;
/*
    -moz-border-radius: 14px;
    -webkit-border-radius: 14px;
*/

}

.menusystem ul li 
{
    position: relative;
/*
    -moz-box-shadow: 2px 2px 4px rgba(0,0,0,0.4);
    -webkit-box-shadow: 2px 2px 4px rgba(0,0,0,0.4);
    -moz-border-radius: 14px;
    -webkit-border-radius: 14px;
*/
}

.menusystem ul li ul 
{
    display: none;
    position: absolute;
    top: 1.6em;
    right: 0;
    width: 10em;    
}

.menusystem li a {
    display: block;
    padding: 5px 10px;
     /* dark blue */
/*  border: 1px solid #2e6ea4; */
    text-decoration: none;
}

.menusystem ul li.main_menu_li {
    float:right;
    width: 10em;
    margin-right:0.2em;
    text-align: center;
}

/* IE-Win (Holly hack) reads the list item line breaks, so lets hide those \*/
* html ul li { float: left; }
* html ul li a { height: 1%; }


.menusystem li:hover ul, .menusystem li.mouseHover ul { 
    display: block;
}

.menusystem li ul.child_menu_ul li a
{
    /*
    color: #fff;
    */
    color: #fff;
    /* light blue */
/*  background: #7ba9c9;  */

        font-size: 80%;
    text-shadow: none;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    border-bottom: 1px solid #2e6ea4;
    border-top: 0px;
    background: none repeat scroll 0 0 #2E6EA4;
}
.menusystem li ul.child_menu_ul li.first a
{
    -moz-border-radius-topleft: 14px;
    -moz-border-radius-topright: 14px;
    -webkit-border-top-left-radius: 14px;
    -webkit-border-top-right-radius: 14px;
    -moz-border-radius-bottomleft: 0;
    -moz-border-radius-bottomright: 0;
    -webkit-border-bottom-left-radius: 0;
    -webkit-border-bottom-right-radius: 0;
    border-top: 1px solid #2e6ea4;
}

.menusystem li ul.child_menu_ul li.last a
{
    -moz-border-radius-topleft: 0px;
    -moz-border-radius-topright: 0px;
    -webkit-border-top-left-radius: 0px;
    -webkit-border-top-right-radius: 0px;
        -moz-border-radius-bottomleft: 14px;
    -moz-border-radius-bottomright: 14px;
    -webkit-border-bottom-left-radius: 14px;
    -webkit-border-bottom-right-radius: 14px;
}

.menusystem li ul.child_menu_ul li.only a 
{
    -moz-border-radius: 14px;
    -webkit-border-radius: 14px;

}

.menusystem li ul.child_menu_ul li a:hover {
    color: #ff0;
    background: #2e6ea4; 
}

/*.menusystem li.main_menu_li a */
.menusystem ul.child_menu_ul a
{
    color: #fff;
/*
    background: -moz-linear-gradient(100% 100% 90deg, #668eb8, #2e6ea4 );
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#668eb8), to(#2e6ea4));
*/

    text-shadow: 1px 1px 1px rgba(0,0,0,0.9);
    /*
    -moz-text-shadow: 1px 1px 1px rgba(0,0,0,0.9);
    -webkit-text-shadow: 1px 1px 1px rgba(0,0,0,0.9);
    -moz-border-radius: 14px;
    -webkit-border-radius: 14px;
*/
}

.menusystem li.main_menu_li a:hover 
{
/*      background-color: #2e6ea4; */
    color: #ff0;
}

ul li.spaced
{   
    padding-bottom: 10px; 
    font-weight: normal;    
}

Answer 1

为什么不是简单的边框？

#site_nav>ul>li+li {
    border-left: solid 2px white;
}

这会立即在li li内ul的{{1}}（即，不是第一个）左边的任何#site_nav直接兄弟的左边添加一个2px厚的白色边框}}

Answer 2

“分隔符”是什么意思？只是一条线？如果是这样，您只需将border-bottom属性添加到相关<li>的CSS中。

Answer 3

在每个导航菜单之间添加一个额外的li，为它提供类分隔符并设置分隔符类的样式。

<ul class="main_menu_ul">
 <li class="main_menu_li"><a href="http://www.problemio.com/">Support</a></li>
 <li class="main_menu_separator"></li>
 <li class="main_menu_li"><a href="http://www.problemio.com/">Problems</a> 
  <ul class="child_menu_ul">
   <li class="first"><a href="http://www.problemio.com/">Categories</a></li>
  </ul>
 </li>
</ul>


.main_menu_separator { width: (width of image); height: (height of menu); background-image: (separator image); }

Answer 4

如果我正在制作菜单系统，我将使用<div>元素而不是<ul>和<li>。那么，对于一个分隔符，我只需要放<hr />和Voilà！

当然，大多数人似乎都习惯使用菜单列表......

如何在结构为<ul> <li> </li> </ul>的菜单之间添加分隔符

4 个答案: