Dynamic Drive CSS Library- Arrow Bullet List Menu

CSS Library

CSS Layouts

Web Graphics

Free Icons

Online Tools:

Website Templates

Social Media Applications

PSD to HTML

Web Templates

Website Hosting

HTML Editor

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 (43)

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 3 of 5 pages « First < 1 2 3 4 5 >

cool menu script.

Posted by Picture Dictionary on 04/28, 12:51 AM

ITt already made a background image,right?

Posted by haiming webhosting reviews on 04/30, 09:05 PM

so good. i like it.

Posted by cyco on 05/01, 06:23 AM

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

GREAT JOB MY FRIEND \o/

Posted by Douglas Nascimento on 05/11, 12:41 PM

It look professional menu.

I like it. thanks.

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

很好，很强大

Posted by james on 05/22, 10:33 PM

for got this menu thenks of world and you

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

Comment Pages 3 of 5 pages « First < 1 2 3 4 5 >