title: Overriding external CSS rules for a jquery menu
body: <p>I have a page layout which works fine and it's one that I don't want to mess with (unless I have to).  I'm not adept at javascript so I found an example online.  The problem I'm getting is that when using my accordion menu, the submenu is offset to the right.  I used some inline CSS in the html itself and used the <code>!important</code> command to override the automatic padding that's on the list elements.  This doesn't seem to be having any effect. JS fiddle <a href="http://jsfiddle.net/aqeFd/1/" rel="nofollow">here</a>.  There's tons of autogenerated commented code in there so it's going to be messy, I just needed all of it to show the example of what the accordion submenu looks like.  Why isn't the inline CSS overriding the external CSS file?  Why isn't the <code>!important</code> keyword working? </p>
  
  <p>I thought there was some padding going on but
  <code>ul { 
      padding: 0;
      margin: 0;
  }
  </code> is in my external CSS file, and padding is obviously set to 0.  </p>
  
  <p>Here is the CSS that makes the accordion work. </p>
  
  <pre><code>&lt;style type="text/css"&gt;
  #accordionNav {
      float: left;
      width: 560px;
      list-style:none;
  
      padding:none;
  }
  #accordionNav li a {
      display: block;
      padding:5px;
      background: #ccc;
      border-top: 1px solid #eee;
      border-bottom: 1px solid #999;
      text-decoration: none;
      color: #000;
      list-style:none;
      padding:none !important;
  
      width: 560px;
  }
  #accordionNav li a:hover, #accordionNav li a.active {
      background: #999;
      color: #fff;
  }
  #accordionNav li ul {
      display: none; 
      list-style:none;
      padding:none !important;
  
  }
  #accordionNav li ul li a {
      padding:0 0 0;
      background: #ececec;
      list-style:none;
      padding:none !important;
  
  }
  </code></pre>
  
  <p>Any idea what it could be that's keeping the sub menu from aligning properly?</p>