Vertical CSS menu with dashes

. Thursday, July 31, 2008
  • Agregar a Technorati
  • Agregar a Del.icio.us
  • Agregar a DiggIt!
  • Agregar a Yahoo!
  • Agregar a Google
  • Agregar a Meneame
  • Agregar a Furl
  • Agregar a Reddit
  • Agregar a Magnolia
  • Agregar a Blinklist
  • Agregar a Blogmarks

I have been really very busy this month. Hardly had time to post anything on my blog. So thought I better post a short quick tutorial of a dashed vertical css menu.

Preview (it will look like this at the end)

(Link 1 is hovered in the image)

HTML (the ever popular unordered list!):

<div id="menu">
<h1>My menu</h1>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul>
</div>

Now you will require some css.

CSS code:
#menu {
font-family
: Arial;
width
: 150px;
padding
: 0px;
margin
: 0px;
}

#menu h1
{
display
: block;
background-color
:#666666;
font-size
: 16px;
padding
: 5px 0px 5px 5px;
border
: 1px solid #000000;
color
: #ffffff;
margin
: 0px;
width
:147px;
}

#menu ul
{
list-style
: none;
margin
: 0px;
padding
: 0px;
border
: none;
}

#menu ul li
{
margin
: 0px;
padding
: 0px;
}

#menu ul li a
{
font-size
: 14px;
display
: block;
border-bottom
: 1px dashed #bbbbbb;
padding
: 5px 0px 2px 4px;
text-decoration
: none;
color
: #666666;
width
:150px;
}

#menu ul li a:hover, #vertmenu ul li a:focus
{
color
: #000000;
background-color
: #eeeeee;
}

3 comments:

Anonymous said...

such small markup, but yet powerful css. thanks for the post :)

Joanne said...

nice post. thanks for sharing. i will make use of it on my blog.

LawrencE said...

thanks, i use it in my project!