title: How Do I Center Drop Down Menu Text?
body: <p>I'm a student making a mock website for a project. 
  URL: <a href="http://www.brightpixelstudios.com" rel="nofollow">http://www.brightpixelstudios.com</a></p>
  
  <p>Under 'About' you'll find a drop down menu. I'm trying to center the text of this drop down menu but being a CSS noob, I'm having a hard time.</p>
  
  <p>Here's the template CSS which covers the drop down menu:</p>
  
  <pre><code>.nav li ul  { background: #fff; margin:5px 0 0; padding:10px 0 0; position: absolute; left: -999em; width: 180px; border: 1px solid #e3e3e3; z-index:9999; }
  .nav li ul li { margin:0; }
  .nav li ul li a  { padding: 8px 15px; width:150px; color:#666 !important; background: none; font-size:0.8em;}
  .nav li ul li a:hover  { font-weight: bold; }
  .nav li ul li a.sf-with-ul { padding-right:0; }
  .nav li ul ul  { margin: -35px 0 0 170px !important; }
  
  .nav li ul li a:hover, 
  .nav li.current_page_item ul li a, 
  .nav li.current_page_parent ul li a,
  .nav li.current-menu-ancestor ul li a,
  .nav li.current-cat a ul li,
  .nav li.current-menu-item ul li a,
  .nav li.sfHover ul li { background:none;}
  
  .nav li:hover,.nav li.hover  { position:static; }
  .nav li:hover ul ul, .nav li.sfhover ul ul,
  .nav li:hover ul ul ul, .nav li.sfhover ul ul ul,
  .nav li:hover ul ul ul ul, .nav li.sfhover ul ul ul ul { left:-999em; }
  .nav li:hover ul, .nav li.sfhover ul,
  .nav li li:hover ul, .nav li li.sfhover ul,
  .nav li li li:hover ul, .nav li li li.sfhover ul,
  .nav li li li li:hover ul, .nav li li li li.sfhover ul  { left:auto; /* margin-left:-50px; */ }
  
  .nav .sf-sub-indicator {background: url(images/arrow-superfish.png) no-repeat;position:absolute;display:block;right:0.4em;top:44%;width:10px;height:10px;text-indent:-999em;overflow:hidden;}
  .nav li ul .sf-sub-indicator {background:url(images/arrow-superfish-right.png) no-repeat; top:38%; }
  </code></pre>
  
  <p>I'd appreciate it so much if someone could help me with this problem.</p>