CODEWITHSUNDEEP
htmlcssmenu
Josh Hall
Josh Hall

Reputation: 31

Dividing line in horizontal menu

I have this menu - 

<div ><ul id="menu">
        <li class="one"><a href="http://www.domain.com">Dashboard</a></li>
        <li class="two"><a href="<?php echo bp_loggedin_user_domain() ?>">Profile</a></li>
        <li class="three"><a href="<?php echo bp_loggedin_user_domain() ?>messages">Messages</a></li>
        <li class="four"><a href="<?php echo bp_loggedin_user_domain() ?>friends">Friends</a></li>
        <li><?php bp_adminbar_notifications_menu() ?>
        <ul>
        <li> </li>
        </ul>
        </li>
    </ul>

Is there anyway I can add vertical dividing lines between the items? Thanks

Upvotes: 2

Views: 2971

Answers (1)

Sampson
Sampson

Reputation: 268344

You could use the :after to place them:

#menu > li:after {
  content: '|' /* or url('divider.png'); */
}
#menu > li:last-child:after {
  content: none;
}

I suspect this may be what you're after. Though note that your browser support will be somewhat limited to more modern browsers. Fortunately the degrading is very graceful and won't break on older browsers.

Demo: http://jsbin.com/awarih/edit#html,live
Demo (with image): http://jsbin.com/awarih/2/edit#html,live

Upvotes: 2

Related Questions