Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library

CSS Library: Horizontal CSS Menus: CSS3 demos: Here

Split Drop Down Menu

Author: Dynamic Drive

Using a combination of CSS2 selectors, pseudo classes, CSS3 transitions, plus a tough of JavaScript, we arrive at a CSS based split menu button, even sans images! The menu toggler to the right of the button is dynamically generated using CSS2 generated content, with an invisible <input type="checkbox"> element overlaid on top so it responds to the ":checked" state (which thanks to sibling selectors can in turn affect elements next to the checkbox). JavaScript here is used simply to dynamically toggle the HTML checkbox's state in a more comprehensive manner, with that state triggering either the display or hiding of the corresponding drop down menu. The result is a extremely lean, primarily CSS powered drop down menu!

The menu works in IE9+ and all modern versions of FF, Chrome, Safari, and Opera. In IE8 the split menu portion is completely hidden, using IE conditional comments.

Demo (best viewed in (IE9+, FF4+, Chrome/Safari, and Opera 10+):

The CSS:

The code above references a linked CSS file, which you should download below:

  • css3splitmenu.css (depending on where you save this file, change the path to it inside the code above accordingly).


To define a split menu, simply create a DIV tag with class="css3splitmenu", and add the following 3 elements inside it:

<div class="css3splitmenu">
<a href="">JavaScript Kit</a> <input type="checkbox" />

<li><a href="" >Free JavaScripts</a></li>
<li><a href="">JS Tutorials</a></li>
<li><a href="">JS Reference</a></li>
<li><a href="">Web Design Tutorials</a></li>
  • The code in blue should be a regular link that is the button itself.
  • The code in green is the checkbox used to trigger the drop down menu, and should always be defined exactly as is.
  • The code in brown should be a regular UL list that will act as the drop down menu.

To define a button that does *not* carry a split menu yet still inherits the same style as a button that does, simply define the following instead:

<div class="css3splitmenu nocss3splitmenu">
<a href="">CSS Drive</a>

As you can see, it's the same basic code as a split menu button, but stripped of the later two components; notice also the "nocss3splitmenu" class added to the outer DIV itself.

Code Info

Rate this code:

Date Posted: 03/06/2013

Revision History: None

Usage Terms: Click here

Copyright 2006-2016 Dynamic Drive