PDA

View Full Version : Trying To Create Vertical List menu



Arch_Angel_X
27 Apr 2007, 09:54 PM
Hi All,

I am trying to create this specific vertical list.
http://www.rio-p.com/gif/menu.gif
The challenge that I am having is trying to create the static sub menu BUT not the drop down like the usual drop down menu.

I have been trying to make it but so far nothing works :(

Wickham
28 Apr 2007, 06:46 AM
I'm not quite sure what you want to do.

If you don't want drop down menus then the image you show in the link would be just a vertical list of links.
<a href="link1.html">Link 1</a><br>
<a href="link2.html">Link 2</a><br>

If you just want a vertical list where the link background changes color on hover; then the code would be something like this:-
In the head section:-

<style type="text/css">
.highlight a:link { display: block; width: 150px; height: 30px;
background-color: #B22222; color: white; }
highlight a:visited { display: block; width: 150px; height: 30px;
background-color: #B22222; color: white; }
.highlight a:hover { display: block; width: 150px; height: 30px;
background-color: #CD5C1C; color: white; }
highlight a:active { display: block; width: 150px; height: 30px;
background-color: #B22222; color: white; }
</style>

In the body:-

<div style="width: 150px;">
<div class="highlight"><a href="home.html">Home</a></div>
<div class="highlight"><a href="profile.html">Company Profile</a></div>
</div>

If you do want a drop down menu, there are plenty to choose from here:-
http://www.cssplay.co.uk/menus/index.html
http://www.cssplay.co.uk/menus/flyout4.html
http://www.cssplay.co.uk/menus/tabmenu.html