Vertical and Horizontal Css Navigation

Little Miss *

I am updated my web site, currently I have a horizontal navigation bar on my home page which is css based, linking to different pages on my website. I want to also have a vertical navigation bar on the home page listing the products I do for quick links to a product page with a little description on these, I have tried inserting my other css to create the vertical nav bar but each time i do my main navigation bar changes too the style of the vertical nav bar. The horizontal nav bar is used throughout my website the vertical nav bar I only want on my home page. Anyone know what the problem my be and how to solve this. Thanks

DonkeyStyle \o/

I'd say both pieces of CSS are either styling generic elements without much specificity (ul, li, etc.), or there's a naming conflict with your classes or ids.
You need to have a look at the html for the menus and see where they're similar.
What I'd do is assign a class or id to the div containing your vertical nav, then modify the CSS for that menu to include the class or id name.

For example if you had...

ul {
/*CSS HERE*/
}

[...]

<div>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>

You could make the CSS unique to that div by doing...

[b]#mymenu[/b] ul {
/*CSS HERE*/
}

[..]

<div[b] id="mymenu"[/b]>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>

The rule #mymenu ul will be able to work on that menu without effecting all ul's.

[moved to Web Development & Design]