help with vertical list menu

[daraptor]

hi guyz,
i need some help with vertical list menu....
this menu is to the left side and when we take the mouse on to the menu ...it should display a sub menu....as of now i have a css file in my code and i googled for vertical list menu codes ...but all have diff css files which is messin up my code....
i dont want any otherstyling sheet..coz its messin up my code...can some one help me with this ..so that i can put a sub menu where i want without addin any style sheets...thanx

<div>
<span>Products & Services</span>
<a href="products.html">Products</a>
<a href="uni_iden_arch.html">Unified Identity Architecture</a>
<a href="key_features.html">Key Features of UIA</a>
<a href="benefits.html">Benefits of UIA</a>
<a href="indust_standards.html">UIA and the Industry Standards</a>
<a href="clients_problems.html">Clients Problems</a>(this is where i want my sub menu)
<a href="simpl_solutions.html">Simplified Soutions</a>
<a href="achieving.html">Achieving Solutions using UIA</a>
</div>

[Centauri]

Here is an article dealing with suckerfish dropdown menus - Link (http://www.htmldog.com/articles/suckerfish/dropdowns/) - whilst the main article deals with horizontal menus, the same thing applies to vertical versions as per the link at the bottom of that page.

[daraptor]

Here is an article dealing with suckerfish dropdown menus - Link (http://www.htmldog.com/articles/suckerfish/dropdowns/) - whilst the main article deals with horizontal menus, the same thing applies to vertical versions as per the link at the bottom of that page.


i appreciate ur help...but i dont want to use any other styling sheet...cant i jss make changes to the html code without addin a stylin sheet....

[Centauri]

You don't need an extra style sheet at all - just add the styling for the menu to your existing styles. If the menu is given an id, then styling directed towards it won't affect anything else.

[daraptor]

thanx for the reply man...but this is something i never did before....can u elaborate on what u said

[Centauri]

As per the article I linked, the menu <ul> (a menu is a list of links, and should be marked up as such) is given an id of "nav" :<ul id="nav">
<li><a href="#">Percoidei</a>
<ul>
<li><a href="#">Remoras</a></li>
<li><a href="#">Tilefishes</a></li>
<li><a href="#">Bluefishes</a></li>
<li><a href="#">Tigerfishes</a></li>
</ul>
</li>

<li><a href="#">Anabantoidei</a>
<ul>
<li><a href="#">Climbing perches</a></li>
<li><a href="#">Labyrinthfishes</a></li>
<li><a href="#">Kissing gouramis</a></li>
<li><a href="#">Pike-heads</a></li>
<li><a href="#">Giant gouramis</a></li>
</ul>
</li>

<!-- etc. -->

</ul>and the css styling references elements within "nav" :#nav, #nav ul {
padding: 0;
margin: 0;
list-style: none;
}

#nav a {
display: block;
width: 10em;
}

#nav li {
float: left;
width: 10em;
}As these styles only apply to items that have, or are within something that has, an id of "nav", then none of these styles will interfere with other styles you already have.