View Full Version : CSS - Creating a vertical navigation menu?

03-04-2008, 08:28 AM
I am trying to figure out exactly how to do this, as I am very new to CSS. I want to avoid tables in my menu, and have seen CSS work wonders in that aspect.

What I would like to know is first off, how can I make a basic menu (vertical) with rollover colors?

Secondly, how can I make a property on that menu display more options (for example...Downloads > - Video - Screenshots - Podcasts)?

Any and all help is very, very much appreciated! :thumbsup:

03-04-2008, 08:39 AM
You could have this code as a start:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
<style type="text/css">
width: 260px;
padding: 0px;
border: 3px solid #211E08;
margin:1px auto;
list-style-type: none;
margin: 0px;
padding: 0px;

margin: 1px;
padding: 0px;
width: 100px;
text-align: right;
#right a
width: 100px;
display: block;
background: #222;
color: #efefff;
font: 11px Tahoma, Arial;
border-left: 12px solid #9999cc;
text-decoration: none;
margin: 1px auto;
padding: 0px;
border-right:5px solid #cfcfcf;

#right a:hover
color: #fff;
background: #B8AA7D;
border-left: 12px solid #0000ff;
<title>My Page</title>
<div id="right">
<li><a href="#">Home</a></li>
<li><a href="#">Downloads</a></li>
<li><a href="#">CodingForums</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Links</a></li>

You could have a lot of submenu options in this link (http://dynamicdrive.com/dynamicindex1/jsdomenu/index.htm).

See if it helps :D

03-04-2008, 10:48 AM

03-04-2008, 06:31 PM
Pretty fair Tutorial here: http://www.cssplay.co.uk/menus/tutorial.html

03-04-2008, 06:38 PM
I also like http://css.maxdesign.com.au/listutorial/index.htm

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum