title: Problem adjusting JQuery Menu Width with CSS
body: <p>Im having some issues trying to adjust the Width of some of the items for this JQuery Menu that I downloaded from here:  <a href="http://apycom.com/menus/6-midnight-blue.html" rel="nofollow">http://apycom.com/menus/6-midnight-blue.html</a></p>
  
  <p>The CSS is very complex, but I was able to narrow down the Width for the entire Menu, but the other parts have been difficult to track down.</p>
  
  <p>I would like to have the overall Menu width about the same size as the Red Div marked below it.</p>
  
  <p>The slider itself- which moves as you hover over the main menu items is too wide, and Im not sure how to adjust that.</p>
  
  <p>The last menu item "Request Estimate" appears to have no padding at all, and it looks cramped compared to the other menu items.  It is the longest spelled word and thats why, but I would like to figure out a way to slightly reduce the size of the other Main Menu Item widths.</p>
  
  <p>The Sub Menu Box is almost twice the width of the Main Menu Items, and I have no idea how to reduce the width for this.  </p>
  
  <p>With limmited CSS knowledge I seem to messing things up, more than fixing anything.</p>
  
  <p>Any help on this would be greatly appreciated.</p>
  
  <p>Here is the CSS which came with the JQuery download, and I have made adjustments to this:</p>
  
  <pre><code>/* menu::base */
  div#menu {
      height: 51px;
      padding-left: 14px;
      background: url(images/left.png) no-repeat;
      _background: url(images/left.gif) no-repeat;
      width:auto;    
  }
  
  div#menu ul {
      margin: 0;
      padding: 0;
      list-style: none;
      float: left;
  }
  div#menu ul.menu {
      padding-right: 14px;
      background: url(images/right.png) no-repeat right 0;
      _background: url(images/right.gif) no-repeat right 0;    
  }
  
  div#menu li {
      position: relative;
      margin: 0;
      padding: 0 0px 0 0;
      /*background: green;*/
      display: block;
      float: left;
      z-index: 9;
      width: auto;
  }
  div#menu ul ul li {
      z-index: 9;
  }
  div#menu li div {
      list-style: none;
      float: left;
      position: absolute;
      z-index: 11;
      top: 51px;
      left: -3px;
      visibility: hidden;
      width: 194px;
      margin: 0px 0 0 -4px;
      padding: 0; 
      background: url(images/subsubmenu-top.png) no-repeat 0px 0;
      _background: url(images/subsubmenu-top.gif) no-repeat 0px 0;  
  }
  div#menu ul ul {
      z-index: 12;
      padding: 0px 4px 10px 4px;
      background: url(images/submenu-bottom.png) no-repeat 0px bottom;
      _background: url(images/submenu-bottom.gif) no-repeat 0px bottom;        
      margin: 10px 0 0 0;    
  }
  div#menu li:hover&gt;div {
      visibility: visible;
  }
  
  div#menu a {
      position: relative;
      z-index: 10;
      height: 50px;
      display: block;
      float: left;
      line-height: 50px;
      text-decoration: none;
      margin-top: 1px;
      white-space: nowrap;
      /*width: auto;*/
      width: 90px; /*adjust overal menu width*/
      padding-right:5px;
      text-align:center;
  }
  div#menu span {
      margin-top: 2px;
      /*padding-left: 15px;*/
      padding-left: 2px;
      color: #A6C4D5;
      font: bold 12px Arial,Helvetica;
      background: none;
      line-height: 50px;  
      display: block;
      cursor: pointer;
      background-repeat: no-repeat;
      background-position: 95% 0;
      text-align: center;
  }
  
  /* menu::level1 */
  div#menu a {
      padding: 0 10px 0 0;
      line-height: 50px;
      height: 51px;
      margin-right: 5px;
      _margin-right: 1px;
      background: none;
  }
  div#menu a:hover {
      background:  url(images/selected.png)  repeat-x right -1px;
      color: #FFFFFF;
  }
  div#menu li.current a,
  div#menu ul.menu&gt;li:hover&gt;a {
      color: #FFFFFF; 
      background: url(images/selected.png)  repeat-x right -1px;
  }
  
  div#menu ul.menu&gt;li:hover&gt;a span {
      color: #FFFFFF;
  }
  div#menu li {  }
  div#menu li.last { background: none; }
  
  /* menu::level2 */
  div#menu ul ul li {
      background: none;
      padding: 0;
  }
  div#menu ul ul a {
      padding: 0px;
      height: auto;
      float: none;
      display: block;
      line-height: 25px;
      z-index: -1;
      padding-left: 5px;
      white-space: normal;
      width: 164px;
      margin: 0 8px;
      text-transform: none;
      border-top: 1px solid #3A5A8B;
      border-bottom: 1px solid #162133;        
  }
  
  div#menu ul ul a span {
      font-weight:normal;
      padding: 0 5px;
      line-height: 25px;
      font-size: 12px;
      color: #C5D3E7;
  }
  div#menu li.current ul a,
  div#menu li.current ul a span {
      background:none;
  }
  div#menu ul ul a:hover {
      background:none;
      background-color: #21345A;
  }
  div#menu ul ul a:hover span {
  background:none;
  color: #FFFFFF;
  }
  div#menu ul ul a.parent {
      background: url(images/submenu-pointer.png) no-repeat right bottom;
      _background: url(images/submenu-pointer.gif) no-repeat right bottom;  
  }
  div#menu ul ul a.parent span {
      background:none; 
  }
  div#menu ul ul a.parent:hover {
      background: url(images/submenu-pointer.png) no-repeat right bottom;
      _background: url(images/submenu-pointer-hover.gif) no-repeat right bottom;
      background-color: #21345A;
      color: #FFFFFF;  
  }
  div#menu ul ul a.parent:hover span {
      background:none; 
  }
  div#menu ul ul span {
      margin-top: 0;
      text-align: left;
  }
  div#menu ul ul li.last { background: none; }
  div#menu ul ul li {
      width: 100%;
  }
  
  /* menu::level3 */
  div#menu ul ul div {
      /*width: 194px;*/
      padding: 0;
      margin: -51px 0 0 192px !important;
      margin-left: 192px;
  }
  div#menu ul ul ul {
      padding: 10px 4px 0 4px;    
  }
  div#menu ul ul div li {
      position:relative;
      top:-10px;
  }
  
  /* lava lamp */
  div#menu li.back {
      background: url(images/selected.png) repeat-x 0 0;
      width: 5px;
      height: 51px;
      z-index: 8;
      position: absolute;
      padding: 0;
      margin: 0px 0 0 0;
  } 
  
  div#menu li.back .left {
      padding:0;
      width:auto;
      background: url(images/selected.png) repeat-x right 0;
      height: 51px;
      margin: 0 0 0 5px;
      float: none;
      position: relative;
      top: 0;
      left: 0;
      visibility: visible;
  }
  </code></pre>
  
  <p>Here is the HTML:</p>
  
  <pre><code>&lt;%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="DaVincisApp1.WebForm1" %&gt;
  
  &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
  
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head runat="server"&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;link href="menu.css" rel="Stylesheet" type="text/css" /&gt;
      &lt;script type="text/javascript" src="Scripts/jquery.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="Scripts/menu.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;form id="form1" runat="server"&gt;
     &lt;div style="margin-left:1em; margin-top:5em;"&gt;
          &lt;div id="menu"&gt;
         &lt;ul class="menu"&gt;
             &lt;li&gt;&lt;a href="#" class="parent"&gt;&lt;span&gt;Home&lt;/span&gt;&lt;/a&gt;
        &lt;div&gt;&lt;ul&gt;
           &lt;li&gt;&lt;a href="#" class="parent"&gt;&lt;span&gt;Sub Item 1&lt;/span&gt;&lt;/a&gt;
          &lt;div&gt;&lt;ul&gt;
             &lt;li&gt;&lt;a href="#" class="parent"&gt;&lt;span&gt;Sub Item 1.1&lt;/span&gt;&lt;/a&gt;
             &lt;div&gt;&lt;ul&gt;
                &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;Sub Item 1.1.1&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;Sub Item 1.1.2&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
             &lt;/ul&gt;&lt;/div&gt;
             &lt;/li&gt;
             &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;Sub Item 1.2&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
             &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;Sub Item 1.3&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
             &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;Sub Item 1.4&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
             &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;Sub Item 1.5&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
             &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;Sub Item 1.6&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
             &lt;li&gt;&lt;a href="#" class="parent"&gt;&lt;span&gt;Sub Item 1.7&lt;/span&gt;&lt;/a&gt;
             &lt;div&gt;&lt;ul&gt;
                &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;Sub Item 1.7.1&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;Sub Item 1.7.2&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;&lt;/div&gt;
                       &lt;/li&gt;
          &lt;/ul&gt;&lt;/div&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;Sub Item 2&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;Sub Item 3&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;&lt;/div&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;About Us&lt;/span&gt;&lt;/a&gt;
         &lt;div&gt;&lt;ul&gt;
         &lt;li&gt;&lt;a href="#" class="parent"&gt;&lt;span&gt;Our Core Values&lt;/span&gt;&lt;/a&gt;
            &lt;div&gt;&lt;ul&gt;
               &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;Sub Item 1.1&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;Sub Item 1.2&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;&lt;/div&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#" class="parent"&gt;&lt;span&gt;Company History&lt;/span&gt;&lt;/a&gt;
             &lt;div&gt;&lt;ul&gt;
          &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;Sub Item 2.1&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;Sub Item 2.2&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
             &lt;/ul&gt;&lt;/div&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;Our Process&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;Our Credentials&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;Our Guarantee&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;Why DaVinci's&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;&lt;/div&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;Services&lt;/span&gt;&lt;/a&gt;
                    &lt;div&gt;&lt;ul&gt;
                       &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;Residential&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                       &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;Faux Painting&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                       &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;Wallpaper Services&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                       &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;Commercial&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                       &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;Drywall Services&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                       &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;Powerwashing&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                       &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;Painter-For-A-Day&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                       &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;Priority Service&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                    &lt;/ul&gt;&lt;/div&gt;
                 &lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;Porfolio&lt;/span&gt;&lt;/a&gt;
                    &lt;div&gt;&lt;ul&gt;
                       &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;Interior Gallery&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                       &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;Exterior Gallery&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                       &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;Faux Gallery&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                       &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;Commercial Jobs&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                    &lt;/ul&gt;&lt;/div&gt;
                &lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;Testimonials&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;Client Area&lt;/span&gt;&lt;/a&gt;
                    &lt;div&gt;&lt;ul&gt;
                       &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;Start-up Guide&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                       &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;Color Selector&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                       &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;Painting Facts&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                       &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;Paint Glossary&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                       &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;Jobsite Safety&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                       &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;Forms/ Checklists&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                       &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;Online Payment&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                       &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;Privacy Policy&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                    &lt;/ul&gt;&lt;/div&gt;
                 &lt;/li&gt;
      &lt;li class="last"&gt;&lt;a href="#"&gt;&lt;span&gt;Request Estimate&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;br /&gt;&lt;br /&gt;&lt;br /&gt;
  &lt;div style="width:44em; margin-left:1em; background-color:red"&gt;About this size&lt;/div&gt;
  &lt;a href="http://apycom.com/"&gt;&lt;/a&gt;
  &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>