下拉菜單擴展到權當開

我有下拉menu.Dropdown菜單上的問題擴大到權當open.i檢查的margin，padding和白色的價值，但我不發現solution.There是活的樣品放在這裏下拉菜單擴展到權當開

HTML：

<div id="header"> 
    <div class="nav"> 
     <ul> 
      <li><span class="home"></span><a href="#index.html">Lorem ipsum</a></li> 
      <li><span class="department"></span><a href="#department.html" class="drop_down">Lorem ipsum</a> 
       <ul id="submenu"> 
        <li><a href="#">Lorem ipsum</a></li> 
        <li><a href="#">Lorem ipsum</a></li> 
        <li><a href="#">Lorem ipsum</a></li> 
       </ul> 
      </li> 
      <li><span class="index"></span><a href="#">Lorem ipsum</a></li> 
     </ul> 
    </div> 
</div>

CSS：

#header .nav{background:green; height:42px;font-family:Arial;} 
#header .nav ul{margin:0;padding:0;list-style:none;} 
#header .nav ul li{float:left;padding:10px 20px 0 20px;border-right:solid 1px #ccc;height:32px;} 
#header .nav ul li a{color:#fff;text-decoration:none;font-size:0.8em;} 
#header .nav ul li span{height:17px;margin:3px 10px 0 0;float:left;} 
#header .nav ul li span.home{background:url('../image/home.png') no-repeat left top;width:18px;} 
#header .nav ul li span.department{background:url('../image/department.png') no-repeat left top;width:18px;} 
#header .nav ul li span.index{background:url('../image/index.png') no-repeat left top;width:17px;} 
#header .nav ul li span.recipe{background:url('../image/recipe.png') no-repeat left top;width:14px;} 
#header .nav ul li span.car{background:url('../image/car.png') no-repeat left top;width:17px;} 
#header .nav ul li a.drop_down{background:url('../image/arrow_down.png') no-repeat 50px 4px;width:17px;padding-right:14px;} 
#header .nav ul li ul#submenu{position:absolute;display:none;margin:13px 0 0 -20px;border-top:solid 1px #ccc;} 
#header .nav ul li ul#submenu li{clear:both;background:blue; height:42px;font-family:Arial;border-bottom:solid 1px #ccc;margin:0;padding:5px;width:100%;display:inline-block;}

個JS：

$(function(){ 
     $(".drop_down").hover(
      function(){ 
       $("ul#submenu").stop(true,true).slideDown("slow",function(e){ 
        $(this).hover(
         function(){ 
          $(this).show(); 
         }, 
         function(){ 
          $(this).slideDown(); 
         } 
        ); 
       }); 
      }, 
      function(){ 
       $("ul#submenu").stop(true,true).slideUp("slow"); 
      } 
     ); 
    });

來源

2012-07-30 mantissa

width: 100%;在#header .nav ul li ul#submenu li是導致此，給一些固定寬度像100px;，這將解決您的擴大寬度的錯誤。

My Fiddle

來源

2012-07-30 05:36:08

謝謝你的回答。我的問題解決了。 – mantissa 2012-07-30 05:40:40

你應該標記這個答案是正確的，所以其他用戶可以參考:)，並高興地幫助你 – 2012-07-30 05:41:23

問題當變化幅度值固定外來percent.Thanks先生代替解決。

來源

2012-07-30 05:45:39 mantissa

你應該評論這從今以後:)你歡迎 – 2012-07-30 05:47:56

我是新手在這裏:)再次感謝... – mantissa 2012-07-30 05:51:43

我得到了:) .. – 2012-07-30 05:53:42

下拉菜單擴展到權當開

回答

相關問題