Alt menümümü ana menüye daha yakın nasıl getirebilirim?

Question

Bir müşteri için bir proje üzerinde çalışıyorum ve onlar logo ve menüyü iki farklı çizgi üzerinde istediler ve sayfada ortaladılar. Bunu yapmak için css kodlamasını değiştirdim, ancak imleci "Modeller" menüsüne yerleştirdiğimde, alt menü olması gerekenden 100 piksel daha düşük. Düşündüğüm herşeyi denemek için denedim ve ne kadar aşağıya düştüğüne karar verdim ve havluya atıyorum ve mesaj panolarına çarpıyorum. Ben başlık kabı (turuncu), genel navigasyon konteyner (kırmızı) ve navigasyon sarmalayıcı (yeşil belirttiğimiz

Bu Superfish menü, ama satın wordpress şablon için bir paket olarak geldi ....).

http://maulesite.juvamarketing.com/

HTML KOD

<div class="navigation-wrapper"><div class="gdl-current-menu" ></div><div id="main-superfish-wrapper" class="menu-wrapper"><ul id="menu-menu-2" class="sf-menu">  
<li id="menu-item-148" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children"><a href="http://mauleairinc.com/maule-air-technical-manuals-and-documents/"><i class="gdl-menu-icon icon-wrench" ></i><span class="gdl-des-prepend"><span class="gdl-label">Support</span></span></a> 
    <ul class="sub-menu"> 
     <li id="menu-item-277" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://mauleairinc.com/flight-manuals/"><span class="gdl-sub-label">Flight Manuals</span></a></li> 
     <li id="menu-item-276" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://mauleairinc.com/maintenance-manuals/"><span class="gdl-sub-label">Maintenance Manuals</span></a></li> 
     <li id="menu-item-278" class="menu-item menu-item-type-custom menu-item-object-custom"><a href="http://mauleairinc.com/pdf/modification_kit_index.pdf"><span class="gdl-sub-label">Mod Kid Index</span></a></li> 
     <li id="menu-item-274" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://mauleairinc.com/service-bulletins/"><span class="gdl-sub-label">Service Bulletins</span></a></li> 
     <li id="menu-item-273" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://mauleairinc.com/service-letters/"><span class="gdl-sub-label">Service Letters</span></a></li> 
     <li id="menu-item-272" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://mauleairinc.com/supplements/"><span class="gdl-sub-label">Supplements</span></a></li> 
     <li id="menu-item-275" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://mauleairinc.com/rel-oel/"><span class="gdl-sub-label">REL &#038; OEL</span></a></li> 
    </ul> 
    </li> 
</ul></div><div class="clear"></div> 

style.css ->

/*--- navigation ---*/ 
/* div.gdl-navigation-wrapper{ position: relative; float: right; } */ 
div.gdl-navigation-wrapper{ position: relative; text-align: center !important; height: 45px; 
border: 2px solid red; /* Added for debugging purposes */ 
} 

div.gdl-current-menu { position: absolute; top: 0px; bottom: 0px; } 
div.navigation-wrapper{ display: inline-block; font-family: HelveticaNeue, "Helvetica Neue", Arial, Helvetica, sans-serif; height: 55px; 
    border: 2px solid green; /* Added for debugging purposes */ 
} 

div.responsive-menu-wrapper{ margin: 0px 10px; } 
div.responsive-menu-wrapper select{ width: 100%; height: 25px; } 

superfish.css

#main-superfish-wrapper ul li span.gdl-label{ font-size: 15px; line-height: 1.3; display: block; } 
#main-superfish-wrapper ul li span.gdl-description{ padding-left: 1px; font-size: 12px; display: block; } 
#main-superfish-wrapper .gdl-menu-icon{ float: left; font-size: 14px; line-height: 16px; margin-right: 7px; } 
#main-superfish-wrapper .gdl-des-prepend { float: left; } 

ul.sf-menu, .sf-menu * { margin: 0, auto; padding: 0; list-style: none; } 
ul.sf-menu { line-height: 1; } 
ul.sf-menu li { float: left; position: relative; } 
ul.sf-menu li:hover { visibility: inherit; } /* fixes IE7 'sticky bug' */ 
ul.sf-menu li a { padding: 0px 20px; line-height: 24px; text-decoration:none; display: block; position: relative; } 

/*--- sub menu ---*/ 
ul.sf-menu li:hover ul, 
ul.sf-menu li.sfHover ul { left: 0; z-index: 101; top: 46px; } /* top: 46px */ 
ul.sf-menu li ul{ padding-top: -100px; } 
ul.sf-menu li ul li:first-child{ padding-top: 5px; 
    -webkit-border-radius: 3px 3px 0px 0px; 
    -moz-border-radius: 3px 3px 0px 0px; 
    border-radius: 3px 3px 0px 0px; 
    } 
ul.sf-menu li ul li:last-child{ padding-bottom: 5px; 
    -webkit-border-radius: 0px 0px 3px 3px; 
    -moz-border-radius: 0px 0px 3px 3px; 
    border-radius: 0px 0px 3px 3px; } 
ul.sf-menu ul li a{ padding: 5px 0px; margin: 0px 15px; border-top-width: 1px; border-top-style: solid; } 
ul.sf-menu ul li:first-child > a{ border-top-width: 0px; } 
ul.sf-menu li ul ul{ padding-top: 0; } 


ul.sf-menu ul { text-align: left; } 
ul.sf-menu ul { position: absolute; top: 100%; width: 10em; }/* left offset of submenus need to match (see below) */ 
ul.sf-menu ul li { width: 100%; padding: 0px 0px; } 

ul.sf-menu li:hover li ul, 
ul.sf-menu li.sfHover li ul, 
ul.sf-menu li li:hover li ul, 
ul.sf-menu li li.sfHover li ul{ top: 100% } 

ul.sf-menu li li:hover ul, 
ul.sf-menu li li.sfHover ul, 
ul.sf-menu li li li:hover ul, 
ul.sf-menu li li li.sfHover ul { left: 10em; top: -1px; } /* match ul width */ 

ul.sf-menu li li:last-child{ border: 0px; } 
ul.sf-menu li li a{ height: auto; background: none !important; } 

Answer 1

değişiklik olması gereken budur:

<ul class="sub-menu" style="float: none;width: 14.5em; display: none; top: 150px;"> 

Kod satır içi olduğundan, bir yerde Javascript ile üretildiğini varsayalım. Açılır menü ile ilgili JS kodunu gönderir misiniz?