CSS > menu

menu.css

/*
horizonal menu template

example
<ul id="menu-global" class="menu">
   <li>item1
       <ul class="children>
           <li>children item1</li>
       </ul>
   </li>
   <li>item2</li>
</ul>
*/



/* -------------------------------------------------------------------
menu
 ------------------------------------------------------------------- */

/* menu common style
---------------------------------------------------- */
.menu {
    clear: both;
    margin: 0 !important; /* override bootstrap */
}
.menu li {
    position: relative;
    float: left;
    list-style: none;
}
.menu li a {
    display: block;
    text-align: center;
    text-decoration: none;
}
.menu li a:hover {
    text-decoration: underline;
}
/* children ul */
.children {
    display: none;
    float: none; /* ul of children aligin li vertical */
    position: absolute;  
    min-width: 160px;
    margin: 0;
    padding: 0;
    background: #F0F0EE;
}
.children li a {
    min-width: 160px;
    border-right: none !important;
    text-align: left;
}
.children li:last-child {
    border-bottom: none;
}

/* global menu specification
---------------------------------------------------- */
.menu-global li {
    border-right: 1px solid #005588;
}
.menu-global li:last-child {
    border: none;
}

/* extra menu specification
---------------------------------------------------- */
.menu-extra li {
   border-left: 1px solid #0088CC;
}
.menu-extra li:first-child {
    border: none;
}