style specific unordered list without affecting other ul's - list

Question

This is doing my nut in and ruining my weekend.
I found this great expandable jquery vertical navigation menu. The problem is on other pages i have unordered lists and the unordered list style for the jquery vertical menu effects all the other unordered lists and i dont want that.
The html and inline css etc is this..........
ul{list-style: none; padding: 0; margin: 0;}
#nav {float: left; width: 280px; border-top: 1px solid #999; border-right: 1px solid #999; border-left: 1px solid #999; margin: 15px 0;}
#nav li a {display: block; padding: 10px 15px; background: #ccc; border-top: 1px solid #eee; border-bottom: 1px solid #999; text-decoration: none; color: #000;}
#nav li a:hover, #nav li a.active {background: #999; color: #fff;}
#nav li ul {display: none;}
#nav li ul li a {padding: 10px 25px; background: #ececec; border-bottom: 1px dotted #ccc;}
<ul id="nav">
<li>Item 1
<ul>
<li>Sub-Item 1 a</li>
<li>Sub-Item 1 b</li>
<li>Sub-Item 1 c</li>
</ul>
</li>
<li>Item 2
<ul>
<li>Sub-Item 2 a</li>
<li>Sub-Item 2 b</li>
</ul>
</li>
<li>Item 3
<ul>
<li>Sub-Item 3 a</li>
<li>Sub-Item 3 b</li>
<li>Sub-Item 3 c</li>
<li>Sub-Item 3 d</li>
</ul>
</li>
<li>Item 4
<ul>
<li>Sub-Item 4 a</li>
<li>Sub-Item 4 b</li>
<li>Sub-Item 4 c</li>
</ul>
</li>
</ul>
i tried changing the css ul to #nav ul{list-style: none; padding: 0; margin: 0;} but this doesnt seem to work. please help this me out someone. cheers.
teddy

Answer 1

Usually, when you download a JQuery widget or thingamabob, it comes in a folder, with an example on how to use it! But i'm only guessing here that you didn't get this straight from JQuery UI?
In any case, try wrapping your menu into a DIV, with ID = "Nav"...
your other UL's inside your pages should then inherit the default ul style you declare above.