title: Styling a jQuery UI Accordion
body: <p>can anyone tell me how to get css like this: <a href="http://jqueryui.com/demos/accordion/#mouseover" rel="nofollow">http://jqueryui.com/demos/accordion/#mouseover</a> for the below code: </p>
  
  <pre><code>   &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
  &lt;meta name="robots" content="all" /&gt;
  &lt;title&gt;jQuery Vertical Accordion Menu Plugin v 2.6&lt;/title&gt;
  &lt;link href="css/dcaccordion.css" rel="stylesheet" type="text/css" /&gt;
  &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type='text/javascript' src='js/jquery.cookie.js'&gt;&lt;/script&gt;
  &lt;script type='text/javascript' src='js/jquery.hoverIntent.minified.js'&gt;&lt;/script&gt;
  &lt;script type='text/javascript' src='js/jquery.dcjqaccordion.2.7.min.js'&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  $(document).ready(function($){
  
  
                          $('.accordion-6').dcAccordion({
                          eventType: 'hover',
                          autoClose: true,
                          saveState: true,
                          disableLink: true,
                          menuClose: false,
                          speed: 'medium',
                          showCount: true,
  
                          autoExpand: true,
                          cookie  : 'dcjq-accordion-1',
                          classExpand  : 'dcjq-current-parent',
  
                          menuClose: false    
                      });
  
  });
  &lt;/script&gt;
  &lt;link href="css/skins/blue.css" rel="stylesheet" type="text/css" /&gt;
  &lt;link href="css/skins/graphite.css" rel="stylesheet" type="text/css" /&gt;
  &lt;link href="css/skins/grey.css" rel="stylesheet" type="text/css" /&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div class="wrap"&gt;
      &lt;div class="graphite demo-container"&gt;
  
              &lt;ul class="accordion accordion-6"&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Products&lt;/a&gt;
                      &lt;ul class="accordion"  id="accordion-6"&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Mobile Phones &amp;#038; Accessories&lt;/a&gt; &lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Desktop&lt;/a&gt; &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;About Us&lt;/a&gt;
                  &lt;ul class="accordion"  id="accordion-6"&gt;
                      &lt;li&gt;&lt;a href="#"&gt;About Page 1&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;About Page 2&lt;/a&gt;&lt;/li&gt;            
                  &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Services&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Contact us&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Iam new to this CSS, so please can anyone tell me how to achive that..? </p>
  
  <p>Iam thinking to have my CSS like this site:</p>
  
  <pre><code>http://bag-saver.com/uk/shop/black-handbags/
  </code></pre>
  
  <p>Can anyone pls..?</p>