Question

I am working on this site, and I have a requirement to make navigation menus that expand when you mouse over them, and that have white vertical bars that separate the entries. And all the way to the right would be the ability to search.

The site is: http://www.problemio.com and I am talking about the items that have the background image near the top of the screen that has the words “problems support”

I have this html for that div:

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

And I have this css for the 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;
}

and this css for the

pieces that make up the dropdowns:

.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

Why not a simple border?

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

This adds a 2px-thick white border to the left of any li immediate sibling to a li (so, not the first) immediately inside a ul immediately inside #site_nav.