help with menu

[daraptor]

i need help with vertical menu

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>

[boogyman]

firstly this should be done using a unordered list because thats what this is.
you will find it much easier that way to do your submenus...

as for the new css messing up your existing code, well all you need to do for that is to create a unique id for the menu and reference it in your css stylesheet



<ul id="menu">
<li><a href="/path">TITLE</a></li>
<li><a href="/path">TITLE</a></li>
<li><a href="/path">TITLE</a>
<ul class="sub-menu">
<li><a href="/path">TITLE</a></li>
<li><a href="/path">TITLE</a></li>
<li><a href="/path">TITLE</a></li>
</ul>
</li>
<li><a href="/path">TITLE</a></li>
<li><a href="/path">TITLE</a></li>
<li><a href="/path">TITLE</a>
<ul class="sub-menu">
<li><a href="/path">TITLE</a></li>
<li><a href="/path">TITLE</a></li>
<li><a href="/path">TITLE</a></li>
</ul>
</li>
</ul>




ul#menu li {
list-style: none;
display:block;
}
ul#menu li ul.submenu {
display: none;
}
ul#menu li:hover ul.submenu {
display:block;
position: relative;
top: 1em; /* distance from the top of the link selected */
left: 5em; /* distance left from the left margin of the link selected
z-index: 5; /* to ensure this is the element is in the foreground */
}


note this will not work for older "legacy" browsers that do not have support for the psuedo selector :hover most notably IE6. See http://www.alistapart.com/articles/hybrid/ for more information