Dynamic Drive CSS Library- Arrow Bullet List Menu

CSS Library

CSS Layouts

Web Graphics

Free Graphics

Online Tools:

Advertise Here

CSS Library: Vertical CSS Menus: Here

Arrow Bullet List Menu

Author: Dynamic Drive

This CSS list menu features category headers with a two toned background, UL elements that have their default margins and padding removed, and finally, LI elements with custom bullet images. The result is something simple but elegant, and resembling something you might have seen on this site already! Note: For a version of this menu that dynamically expands and hides its sub menus, see Accordion Menu.

Demo:

CSS Library

CSS Drive

The two images used:

The CSS:

<style type="text/css">

.arrowlistmenu{
width: 180px; /*width of menu*/
}

.arrowlistmenu .headerbar{
font: bold 14px Arial;
color: white;
background: black url(media/titlebar.png) repeat-x center left;
margin-bottom: 10px; /*bottom spacing between header and rest of content*/
text-transform: uppercase;
padding: 4px 0 4px 10px; /*header text is indented 10px*/
}

.arrowlistmenu ul{
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 8px; /*bottom spacing between each UL and rest of content*/
}

.arrowlistmenu ul li{
padding-bottom: 2px; /*bottom spacing between menu items*/
}

.arrowlistmenu ul li a{
color: #A70303;
background: url(media/arrowbullet.png) no-repeat center left; /*custom bullet list image*/
display: block;
padding: 2px 0;
padding-left: 19px; /*link text is indented 19px*/
text-decoration: none;
font-weight: bold;
border-bottom: 1px solid #dadada;
font-size: 90%;
}

.arrowlistmenu ul li a:visited{
color: #A70303;
}

.arrowlistmenu ul li a:hover{ /*hover state CSS*/
color: #A70303;
background-color: #F3F3F3;
}

</style>

The HTML:

<div class="arrowlistmenu">

<h3 class="headerbar">CSS Library</h3>
<ul>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C1/">Horizontal CSS Menus</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C2/">Vertical CSS Menus</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C4/">Image CSS</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C6/">Form CSS</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C5/">DIVs and containers</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C7/">Links & Buttons</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C8/">Other</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/all/">Browse All</a></li>
</ul>

<h3 class="headerbar">CSS Drive</h3>
<ul>
<li><a href="http://www.cssdrive.com">CSS Gallery</a></li>
<li><a href="http://www.cssdrive.com/index.php/menudesigns/">Menu Gallery</a></li>
<li><a href="http://www.cssdrive.com/index.php/news/">Web Design News</a></li>
<li><a href="http://www.cssdrive.com/index.php/examples/">CSS Examples</a></li>
<li><a href="http://www.cssdrive.com/index.php/main/csscompressor/">CSS Compressor</a></li>
<li><a href="http://www.dynamicdrive.com/forums/forumdisplay.php?f=6">CSS Forums</a></li>
</ul>

</div>

Code Info

Rate this code:

Date Posted: 01/19/2008

Revision History: None

Usage Terms: Click here

Your Comments (45)

Got a question or need help customizing this CSS code? Post it in the CSS Forums. If you have a comment or suggestion instead, post it in the comments section below.

Comment Pages 2 of 5 pages < 1 2 3 4 > Last »

I LOVE this menu. Left it the way it is on my first site, and I am customizing it for another. A beautiful and professional looking menu. I will be using this a LOT.

Posted by RandyN on 02/23, 10:12 PM

Not sure if it's just me, but there's a missing attribute in

.arrowlistmenu ul li{
padding-bottom: 2px; /*bottom spacing between menu items*/
}

Margin should be set to 0 (margin: 0;) - if you want the menu to be displayed exactly as shown above.

Great website, love the menu, keep up the work!
Denis

Posted by Denis on 03/01, 01:22 PM

Thanks, i was searching for this. Thank you very much :)

Posted by James N on 03/16, 03:55 PM

thanks for this stuff..
it was very nice

me and my frens liked it very much

Posted by ajeet shakya on 03/24, 01:11 AM

Thank you... One of the best!

Posted by SAM on 04/05, 01:03 PM

why is it that the arrow does not show up?

Posted by julio on 05/01, 06:52 PM

thanks alot for these great tips

Posted by ronnie on 05/05, 10:55 AM

thanks!!!! GREAT script!

Posted by Leo on 05/09, 04:56 AM

It look professional menu.

I like it. thanks.

Posted by Tumat. on 05/13, 12:30 AM

for got this menu thenks of world and you

Posted by rako on 06/03, 05:35 AM

Comment Pages 2 of 5 pages < 1 2 3 4 > Last »

Commenting is not available in this weblog entry.