Dynamic Drive CSS Library- Arrow Bullet List Menu

CSS Library

CSS Layouts

Web Graphics

Free Icons

Online Tools:

Website Templates

PSD to HTML

Web Templates

Website Hosting

HTML Editor

Social Media Applications

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

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 4 of 8 pages « First < 2 3 4 5 6 > Last »

Great menu. Looks really professional. There's many examples of vertical css menus on the web, but very little have this simple factor pro look.

great job!

Posted by Mark on 07/30, 08:45 AM

Thank you very much :D

Posted by caticalles on 07/30, 09:38 AM

Thanks! Awesome menu

Posted by Male Enhancement on 08/01, 01:28 PM

CSS "Cascading Style Sheets" Lessons
css list style Properties and examples -- http://css-lessons.ucoz.com/list-css-examples.htm

Posted by css maping on 08/07, 01:10 PM

Yea very sweat menu i have it at WWW.FITECLAN.COM i love this menu very handy and nice layout. I plan to use it on my forums once i get it ttoo work.

Posted by FITE-COMMANDER on 08/25, 12:15 AM

Thanks, I love this menu, and i am using it.

Posted by Sudeep Tamrakar on 08/31, 11:57 PM

If your skills are not enough for that, you definitely need a professional web building service assist you at reasonable price. This is the reason why we recommend you these 2 websites, dealing with entirely developed websites, with already installed scripts. There you can find different types of websites: established, dropship, Amazon affiliate, eBay affiliate and other websites and web services. One more reason to visit these sites is the fact that you won't get misled and you will receive your website within 24 hours together with an e-mail containing all the info you need. You will receive entirely developed product at the best price on the market, and don't forget that web optimization, quality hosting service as well as the 24/7 online support also matter.

Posted by Peter on 09/21, 05:06 AM

thenkss very nice menu

Posted by andresss666 on 10/19, 04:23 AM

Cool menu! It's amazing, thanks much!

Posted by nina on 10/20, 01:42 AM

Ok, I'm very new at html coding, adn I can't get these to work. Do you copy this code between the body tag?

Posted by Doxycycline on 10/21, 11:27 AM

Comment Pages 4 of 8 pages « First < 2 3 4 5 6 > Last »