Menu dividers

By Ken Hawkins

menus Requires EBI Visual Framework 1.2.0

If you want to add a break-line to your local masthead "Also in this section" dropddown, here's how.

Contribute a pattern

Have a great way of doing something, add it to the Style Lab. Here's how


Implementation code

Get a zip with all the sample HTML and any spaecial CSS or JS needed: Download a ZIP file More on how to use this

HTML
<li><a href="#">Webinars</a></li>
<li><a href="#">About</a></li>
<li><a href="#">10 Years</a></li>
<li class="divider"><!--divider item--></li>
<li><a href="#">Contact</a></li>

.masthead nav ul.dropdown.menu {
  li.divider {
    border-top: 1px solid #999;
  }
  li:hover {
    background: rgba(0,0,0,.1);
  }
}


.masthead nav ul.dropdown.menu li.divider {
  border-top: 1px solid #999;
}

.masthead nav ul.dropdown.menu li:hover {
  background: rgba(0, 0, 0, 0.1);
}

JS