使用JQuery和CSS的嵌套菜單

Question

我想創建一個使用jQuery和CSS的嵌套導航菜單。

目前我的導航是在xetecx.comxa.com上託管的。問題是嵌套子菜單不會像本視頻中所示的正確嵌套菜單那樣向主菜單右側移動。

https://drive.google.com/file/d/0B0sCu8aj8zu2UzBxQnVlQWdzcUU/edit?usp=sharing 

如果菜單上單擊xetecx.comxa.com

這裏是我的html

<ul> 
      <li> 
       <a href="#" title="Nav Link 1"><img src="img/main.png" /></a> 
       <ul> 
        <li> 
         <a href="#" title="Sub Nav Link 1">Retails</a> 
         <ul> 
          <li> 
           <a href="#" title="Sub Nav Link 1">R</a> 
          </li> 
          <li> 
           <a href="#" title="Sub Nav Link 2">S</a> 
          </li> 
          <li> 
           <a href="#" title="Sub Nav Link 3">A</a> 
          </li> 
          <li> 
           <a href="#" title="Sub Nav Link 4">C</a> 
          </li> 
         </ul> 
        </li> 
        <li> 
         <a href="#" title="Sub Nav Link 2">Services</a> 
        </li> 
        <li> 
         <a href="#" title="Sub Nav Link 3">About Us</a> 
        </li> 
        <li> 
         <a href="#" title="Sub Nav Link 4">Contact Us</a> 
         <ul> 
          <li> 
           <a href="#" title="Sub Nav Link 1">R</a> 
          </li> 
          <li> 
           <a href="#" title="Sub Nav Link 2">S</a> 
          </li> 
          <li> 
           <a href="#" title="Sub Nav Link 3">A</a> 
          </li> 
          <li> 
           <a href="#" title="Sub Nav Link 4">C</a> 
          </li> 
         </ul> 

        </li> 
       </ul> 
      </li> 
      <li> 
       <a href="#" title="Nav Link 1"><img src="img/social.png" /></a> 
       <ul class="social"> 
        <li> 
         <a href="#" title="Sub Nav Link 1"><img src="img/facebook.png" /></a> 
        </li> 
        <li> 
         <a href="#" title="Sub Nav Link 2"><img src="img/twitter.png" /></a> 
        </li> 
        <li> 
         <a href="#" title="Sub Nav Link 3"><img src="img/linked.png" /></a> 
        </li> 
       </ul> 
      </li> 
     </ul> 

和我的jQuery的

(function($) { 

      //cache nav 
      var nav = $("#topNav"); 

      //add indicators and hovers to submenu parents 
      nav.find("li").each(function() { 
       if ($(this).find("ul").length > 0) { 

        $("<span>").appendTo($(this).children(":first")); 

        //show subnav on hover 
        $(this).mouseenter(function() { 
         var ullist = $(this).find("ul"); 
         ullist.stop(true, true).slideDown(); 

         ullist.addClass("ullist"); 
        }); 

        //hide submenus on exit 
        $(this).mouseleave(function() { 
         var ullist = $(this).find("ul"); 
         ullist.stop(true, true).slideUp(); 
         ullist.removeClass("ullist"); 
        }); 
       } 
      }); 
     })(jQuery); 

我試圖使用CSS解決問題

nav > ul > li > a > img { 
width:60px; 
height:60px; 
} 


.social li > a > img{ 
    width:40px; 
height:40px; 
} 

但它沒有爲我工作。

Answer 1

你有沒有試圖改變CSS的

導航UL UL UL

應該留下一些100像素;

所以

.nav ul ul ul 
{ 
left:100px; 
}