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

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>

我有这个CSS的nav_bar

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

这会在#site_nav紧随ul内的li （因此不是第一个）的任何li兄弟的左侧添加2px厚的白色边框。

Answer 2

您所说的“分隔符”是什么意思？ 只是一行？ 如果是这样，您可以简单地将CSS的border-bottom属性添加到有问题的<li> 。

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

当然，大多数人似乎都专注于使用菜单列表...