Menu Dividers

Changing the content of the menu item let's the jQuery Ui menu widget know to render a divider, instead of a link.

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">



<div class="divider">
    <div class="divider-inner"><i class="fa fa-circle-o fa-1x"></i></div>
</div>

CSS

.divider {
  position: relative;
  width: 40%;
  height: 20px;
  line-height: 20px;
  margin: 10px auto 5px auto;
  clear: both;
  text-align: center;
}

.divider-inner {
    position: absolute;
    height: 1px;
    width: 100%;
    top: 50%;
    margin-top: -1px;
    border-top: 1px solid;
    border-color: #e1e1e1;
}