title: jQuery UI Tabs with dropdown enabled tabs
body: <p>I am currently using jQuery UI for page navigation and I am trying to integrate dropdown menus into the tabs because jQuery UI does not look good when there are many tabs. For an idea of what I've got so far, take a look at this screenshot: <a href="http://i.imgur.com/T9lwLI8.png" rel="nofollow">http://i.imgur.com/T9lwLI8.png</a> </p>
  
  <p>The top section is the regular jQuery-UI tabs and the lower section is the new menu design with the mouse hovered over 'patient'. The new menu design is pure CSS - simply layered ul and li tags display: none or block depending on :hover.</p>
  
  <p>Its been a nightmare trying to replace the default jQuery-UI tabs. Styles and jQuery functionality appear to be mixed together because removing the default ids and classes breaks the tabbing functionality but if I add the default ids and classes to my new tabs section it adds unwanted styles to it as well as other bizarre errors.</p>
  
  <p>My guess is that jQuery UI Tabs expects only one ul list containing the tabs but because my CSS implementation uses a ul list for every dropdown-enabled tab it doesn't like it. I've looked through the .js and .css files but to be honest I'm not sure what I'm looking for as I'm by no means an expert on the matter.</p>
  
  <p>I've been Googling but the only solutions I can find usually resort to implementing a carousel to hide/show extra tabs that would otherwise get pushed to another line. How would I get jQuery UI tabs to work with tabs that have dropdown menus on mouseover?</p>