title: WordPress Custom Sub Menu, Custom Sizing Issue
body: <p>I'm having some difficulty figuring this one out. I'm trying to customize my nav bar in Wordpress so that when I hover over the Sub-menu, the Sub-Sub menu starts at the top, regardless of which Sub-menu I'm hovering over.</p>
  
  <p>Amazon's menu structure is a great example of what I am looking to do. Regardless of what department you hover your mouse over, the menu size stays the same and starts from the top.</p>
  
  <p>My nav menu structure right now is:</p>
  
  <p>Main Nav</p>
  
  <ul>
  <li>Sub-menu1</li>
  <li>Sub-menu2</li>
  <li>Sub-menu3</li>
  <li>Sub-menu4</li>
  <li>Sub-menu5</li>
  </ul>
  
  <p>Right now, when I hover over Sub-menu 1, the next menu will open parallel to Sub-menu 1 (Good). When I hover over Sub-menu 2, the next menu will open parallel to Sub-menu 2 (Bad). I want it to open at the same height as the sub-menu 1 line, regardless of whether I'm hovering over Sub-menu 1, 2, 3, 4, or 5. I also want to keep the sub-sub menu the same size, regardless of how many links I'll be putting in there.</p>
  
  <p>Can someone please assist?</p>
  
  <pre><code>/**
   * 4.2 Navigation
   * ----------------------------------------------------------------------------
   */
  .main-navigation {
      clear: both;
      min-height: 35px;
      position: relative;
  }
  
  ul.nav-menu,
  div.nav-menu &gt; ul {
      margin: 0;
      padding: 0;
  }
  
  .nav-menu li {
      display: inline-block;
      position: relative;
      background: url("images/saprator.png") no-repeat scroll right center transparent;
  }
  
  .nav-menu li ul li { background:none;}
  .nav-menu li a {
      color: #FFFFFF;
      display: block;
      font-size: 15px;
      line-height: 1.2;
      padding: 12px 35px;
      text-decoration: none;
      font-family:'Ubuntu',Arial,Helvetica,sans-serif;
      font-family:'Open Sans',Arial,Helvetica,sans-serif;
      XXXtext-transform:uppercase;    
  }
  
  .nav-menu li a:hover{ color:#FFFFFF;}
  .nav-menu li:last-child { background:none;}
  
  .nav-menu .sub-menu,
  .nav-menu .children {
      display: none;
      position: absolute;
      left: -2px;
      z-index: 99999;
      -webkit-border-radius: 0px 0px 3px 3px;
      -moz-border-radius: 0px 0px 3px 3px;
      -khtml-border-radius: 0px 0px 3px 3px;
      border-radius: 0px 0px 3px 3px; 
      padding: 6px;
      background:url("images/dropdown_bg.jpg") repeat scroll 0 0 transparent ;
      border: 1px solid #D3D3D3;
      padding: 5px;
  
  }
  
  .nav-menu li li a,
  .nav-menu .sub-menu a, .nav-menu .children a{ 
  
  
      XXborder-radius: 3px;
      XX-moz-border-radius: 3px;
      XX-khtml-border-radius: 3px;
  
  
      color: #777777;
      padding: 8px 10px;
      text-transform: capitalize; 
  }
  
  .nav-menu .sub-menu a:hover, .nav-menu .children a:hover{ 
      color: #903537;
  }
  
  
  
  
  
  
  .nav-menu .sub-menu ul,
  .nav-menu .children ul {
      left:160px;
      top:0px;
  }
  .nav-menu li.main-li:nth-last-child(1) .sub-menu ul, 
  .nav-menu li.main-li:nth-last-child(1) .children ul,
  .nav-menu li.main-li:nth-last-child(2) .sub-menu ul, 
  .nav-menu li.main-li:nth-last-child(2) .children ul,
  .nav-menu li.main-li:nth-last-child(3) .sub-menu ul, 
  .nav-menu li.main-li:nth-last-child(3) .children ul {
      left: -200px;
      right: auto;
      top: 0;
      width: 205px;
  }
  ul.nav-menu ul a,
  .nav-menu ul ul a {
      margin: 0;
      width: 160px;
      height: 50px;
  }
  
  ul.nav-menu ul a:hover,
  .nav-menu ul ul a:hover {
      color: #FFF;
  }
  
  ul.nav-menu li:hover &gt; ul,
  .nav-menu ul li:hover &gt; ul {
      display: block;
  }
  .nav-menu .current_page_item &gt; a,
  .nav-menu .current_page_ancestor &gt; a,
  .nav-menu .current-menu-item &gt; a,
  .nav-menu .current-menu-ancestor &gt; a { }
  .menu-toggle {
      display: none;
  }
  
  /* Navbar */
  
  .navbar {
      width: 100%;
      clear:both;
      background: url("images/menu_bg.png") repeat scroll center bottom transparent;
      position:relative;
      height: 45px;
      border-radius: 3px;
      -moz-border-radius: 3px;
      -khtml-border-radius: 3px;
  }
  
  .search-form, #searchform {
      background: url("images/search_bg.png") repeat scroll center bottom transparent;
      border-radius: 3px;
      -moz-border-radius: 3px;
      -khtml-border-radius: 3px;
      padding: 5px;  
      text-align: right;
      width: 240px;
      display: inline-block;
      position: relative;
  
  }
  .header-main .search-form, 
  .header-main #searchform {
       position: absolute;
       top: 45px;
      left: 0;
  }
  .search-field, 
  #searchform input[type="text"] {
      background-color: #fff;
      border: 1px solid #E8E6DD;
      cursor: text;
      outline: 0;
      width: 235px;
      -webkit-border-radius: 3px;
      -moz-border-radius: 3px;
      -khtml-border-radius: 3px;
      border-radius: 3px;
      padding:5px 30px 5px 8px;
      float:left;
  
  }
  .widget-area .search-form, 
  .widget-area #searchform{
      margin: 0;
      padding: 0;
      background: none;
      width: 100%;
  }
  
  
  
  input[type=text]{
  
  border: 1px solid #d1d3d4;
  
  }
  
  
  
  
  .header-main .search-field:focus, 
  .header-main #searchform input[type="text"]:focus {}
  .search-field:focus,
  input[type="text"]:focus { border: 1px solid #E8E6DD; border: 1px solid #d1d3d4; }
  .search-form .search-submit, #searchform #searchsubmit {
      background: url("images/sprite.png") no-repeat scroll 0px -222px transparent !important;
      border: medium none;
      border-radius: 0;
      -moz-border-radius: 0px;
      -khtml-border-radius: 0px;
      color: #FFFFFF;
      float: left;
      height: 30px;
      margin: 0 5px;
      overflow: hidden;
      padding: 0;
      position: absolute;
      right: 0;
      text-indent: -959px;
      text-transform: uppercase;
      width: 24px;
      z-index: 3;
      top: 1px;
  }
  .search-form .search-submit:hover, 
  .search-form .search-submit:focus,
  #searchform #searchsubmit:hover, 
  #searchform #searchsubmit:focus{ background: none; border: none;}
  .widget-area .search-form .search-submit,
  .widget-area #searchform #searchsubmit{ top: -5px;}
  #tertiary .sidebar-inner .search-field,
  #tertiary .sidebar-inner input[type="text"] { margin-top:0; width: 100%;}
  .widget_search{ overflow: hidden; position:relative;}
  .header-login-logout{ 
  }
  
  /*** Top Area ***/
  
  #top-area{
      clear: both;
      margin: 0 auto 10px;
  }
  
  /*** End Top Area ***/
  
  #menu-navigation-bar menu, #menu-navigation-bar ol, #menu-navigation-bar ul  {
          margin: 0px;
          padding: 0px;
          background-color: #FFF;
  
  }
  
  
  
  
  #menu-navigation-bar .position1 span, #menu-navigation-bar .position2 span, #menu-navigation-bar .position3 span{
      display: block;
      color: #243889 !important;
      font-family: 'Ubuntu',Arial,Helvetica,sans-serif;
      font-family: 'Open Sans',Arial,Helvetica,sans-serif;
      font-size: 15px;
      padding-left: 7px;
      padding-top: 10px;
      padding-bottom: 20px;
      font-weight: bold;
      text-decoration: underline;
      background-color: #FFF;
  
  }
  
  
  
          #menu-navigation-bar ul.slide-menu li {
              height: auto;
  
              line-height: 16px;
              padding-top: 0px;
              padding-bottom: 0px;
              float: none;
              background-color: #FFF;
              XXcolor: #000000 !important;
              font-size: 14px;
              border: none;
              position: relative;
  
  
          }   
  
  
              #menu-navigation-bar ul.slide-menu li.wide:hover {
                  XXbackground: #ecf0f1;
                  XXbackground-color: #ecf0f1 !important;
  
                      -moz-transition: ease-in-out all .2s;
                  -webkit-transition: ease-in-out all .2s;
  
              }
  
  
  
  
  
          #menu-navigation-bar ul.slide-menu li.wide { 
              //width: 720px; 
              XXbackground-color: #ecf0f1; 
              overflow: auto; 
  
              position: relative;
              left: 2px;
              border: 0px solid #dde4e6; 
  
          }
  
  
  
  
          /* widths for the slide-menu based on how many panels (positions)  are loaded  */
          #menu-navigation-bar ul.slide-menu li.position-1 { width: 200px; }
          #menu-navigation-bar ul.slide-menu li.position-2 { width: 400px; }
          #menu-navigation-bar ul.slide-menu li.position-3 { width: 600px; }
          /* panel positions */
          #menu-navigation-bar ul.slide-menu li div.position1 {
              width: 200px;
              height: 600px;
              float: left;
              overflow: hidden;
          }
          #menu-navigation-bar ul.slide-menu li div.position2 {
              float: left;
              width: 200px;
              overflow: hidden;
          }
              #menu-navigation-bar ul.slide-menu li div.position3 {
              float: left;
              width: 200px;
              overflow: hidden;
              }       
          /* styles */
          #menu-navigation-bar ul li.end ul.sub-menu li ul.slide-menu li.wide div { 
              font-family: open sans, arial; 
              font-weight: bold; 
  
  }
  
  
          #menu-navigation-bar ul li.end ul.sub-menu li ul.slide-menu li.wide div ul.mini li {
              padding: 2px;
              margin: 3px;
              list-style-type: none;
              list-style-position: inside;
              font-size: 11px;
              font-weight: normal;
              color: #333333;
  
          }
  
          #menu-navigation-bar ul li.end ul.sub-menu li ul.slide-menu li.wide div ul.mini li a {
              color: #333333;
              font-size: 11px;
              text-decoration: none;
              font-family: Open Sans, Arial;
  
                      }
  
          #menu-navigation-bar ul li.end ul.sub-menu li ul.slide-menu li.wide div ul.mini li:hover {
              font-color: #333;
              text-decoration: none;
              font-family: Open Sans, Arial;
              XXbackground-color: #fff !important;
              transition: ease-in-out all .2s; 
                  -moz-transition: ease-in-out all .2s;
              -webkit-transition: ease-in-out all .2s;
  
          }
  
  
  
  
  
  
  
  
  
          .sub-menu{
              box-shadow: 1px 1px 1px #CCCCCC;
  
              -webkit-border-top-right-radius: 5px;
              -webkit-border-bottom-right-radius: 5px;
              -moz-border-radius-topright: 5px;
              -moz-border-radius-bottomright: 5px;
              border-top-right-radius: 5px !important;
              border-bottom-right-radius: 5px;
  
  
  
          }
  
  
  
          #menu-navigation-bar{
              XXXbox-shadow: 1px 1px 1px #CCCCCC;
  
              -webkit-border-top-right-radius: 5px;
              -webkit-border-bottom-right-radius: 5px;
              -moz-border-radius-topright: 5px;
              -moz-border-radius-bottomright: 5px;
              border-top-right-radius: 5px !important;
              border-bottom-right-radius: 5px;
  
          }
  
  
  
          .slide-menu{
  
              padding-left: 10px !important;
              padding-bottom: 10px !important;
  
          }
  
  
  
  
  
          .slide-menu a{
  
              font-size: 14px !important;
              padding: 0px !important;
              padding-left: 10px !important;
              padding-top: 5px !important;
          }
  
  
  
  .subHeader{
  
      font-size: 19px !important;
  }
  
  
  
  
      .gridNav{
  
          margin-bottom: 16px;
          margin-left: 11px;
      }
  
  
      .gridNav td{
          font-size: 12px;
      }
  
      .gridNav td:nth-child(3){
          font-size: 12px;
  
      }
  
      .gridNav:first-child, .gridButton, #catfilters a, #searchwithin{
          padding-left: 5px;
          border-radius: 5px;
          box-shadow: 0px 0px 4px #E0E0E0;
  
  
  
          background: rgb(255,255,255);
          background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
          background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(47%,rgba(246,246,246,1)), color-stop(100%,rgba(237,237,237,1)));
          background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(246,246,246,1) 47%,rgba(237,237,237,1) 100%);
          background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(246,246,246,1) 47%,rgba(237,237,237,1) 100%);
          background: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(246,246,246,1) 47%,rgba(237,237,237,1) 100%);
          background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(246,246,246,1) 47%,rgba(237,237,237,1) 100%);
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 );
  
  
  
      }
  </code></pre>