drhaving trouble positioning span with in a down menu - need some help

[PowerBit]

Hello,

I am sorta stumped I had this fixed before and trashed the copy I worked out. I need to center the titles for the drop down menu vertically within the nav bar and I am having difficulty. Do you have suggestions?

http://www.powerbit.blowupyourtv.com...ents/index.htm

<--- css --->
#nav_container {background: #000 url(images/nav_bar.gif) no-repeat top center;
 width: 778px; 
 height: 35px;
 color:#fff;}
 
.nav_titles { width: 100px; border:1px solid #fff; margin-top:10px; margin-right:35px;}
 
#frednav {margin-left:155px;} 
#frednav, #frednav ul{list-style:none;}
#frednav a {color:#fff;
 text-decoration:none;
 font-weight:bold;}
 
#frednav li {float:left;
 position:relative;
 width:130px;
 height:35px;
 margin:0 20px 0 0;
 padding:0 10px 0 0;
 zborder: 1px solid #c6c6c6;
 text-align:right;}

#frednav li:hover, #frednav li:active {background-position: left bottom;}
   
#frednav li ul{position:absolute;
 top:35px;	
 left:-999em;
 line-height:20px;	
 border:1px solid #9999CC;
 border-top:0;
 margin-left:-1px;}
  
 
#frednav li:hover ul {left:auto; left:0;
 display:block;}
	
#frednav ul li {width:140px;
 height:20px;
 margin:0;
 padding:0;
 border:0;}
 
#frednav ul li a {text-align:center;
 background:#000;
 display:block;}

#frednav ul li a:hover {background:#39f;}

#frednav .passion {background: url(images/flame_button.jpg) left top no-repeat;}

#frednav .resources {background: url(images/water_button.jpg) left top no-repeat;}
   
#frednav .core {background: url(images/blood_button.jpg) left top no-repeat;}

<---html--->

<div id="nav_container"> 

 <ul id="frednav">
  <li class="passion"><a href="#"><span id="nav_titles">Passion</span></a>
	<ul>
	<li><a href="#">Item One</a></li>
	<li><a href="#">Item Two</a></li>
	<li><a href="#">Item Three</a></li>
	<li><a href="#">Item Four</a></li>
	</ul>
  </li>
  
  <li class="resources"><a href="#"><span id="nav_titles">Resources</span></a>
	<ul>
	<li><a href="#">Item One</a></li>
	<li><a href="#">Item Two</a></li>
	<li><a href="#">Item Three</a></li>
	<li><a href="#">Item Four</a></li>
	</ul>
  </li>
	
  <li class="core"><a href="#"><span id="nav_titles">Ideologies</span></a>
	<ul>
	<li><a href="#">Item One</a></li>
	<li><a href="#">Item Two</a></li>
	<li><a href="#">Item Three</a></li>
	<li><a href="#">Item Four</a></li>
	</ul>
  </li>
 </ul>
</div>

[Kravvitz]

IDs should be unique. You could use a class instead.

Use line-height or vertical padding to vertically center the text.

[PowerBit]

Thanks Kravvitz... you just led me to my error... I was marking up id's in the HTML and using classes in the CSS... that's what was wrong!