this works fine for me. Having the JS external shouldn't be an issue.
Are you linking to the jQuery and your external JS correctly?
View source on your page and click the link to the scripts and make sure they are there.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>box do-hicky</title>
<style type="text/css">
#nav {width: 900px;
height: 25px;
background-color: white;
position: relative;
top: -10%;
border-top: 2px solid #a6a6a7;
padding-bottom: 10px;
padding-top: 0px;
border-bottom: 2px solid #a6a6a7;}
#nav ul {list-style: none;
font-size: 18pt;
color: #006daf;
font-family: century gothic;
text-transform: lowercase;
margin: 0;
padding: 0 0 0 0px;}
#nav li {display: inline;
padding: 0 25px;
line-height: 25px;
font-size: 14pt;}
</style>
</head>
<body>
<div id="nav">
<ul><li><a href="#" title="Home">Home</a></li>
<li><a href="#" title="News">News</a></li>
<li><a href="#" title="Members">Members</a></li>
<li><a href="#" title="Forums">Forums</a></li>
<li></li>
<li></li>
<li class="listItem"><span class="listItem"></span></li>
<li class="listItem"><a href="#" class="listItem" title="Server">Server</a></li>
<li><a href="#" title="Help">Help</a></li>
</ul>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
if ($.browser.opera){
$('#nav').css({'background' : '#e9d', 'padding-top' : '30px'});
}
</script>
</body>
</html>