順序付けられていないリストはミステリーフォーマットの影響を受けています

Question

私はここで私の心を失っているように感じます。 レイヤーごとにcssレイヤーを最低限に剥がしました。ラッパーには左パディングが約50ピクセルあるようにリストが表示されます。 ここではいくつかのjQeryを使用していますが、それがどのようにリストと関連するdiv配置に影響するかはわかりません。 誰かが犯人を見つけられる場合は、本当に感謝します。 私は以下のコードに1つのリスト項目のみを含めました。彼らはすべて同じです。

ページはこちらです：http://www.tpan.com/testing/custom.html

Javascriptがここにある：

$(document).ready(function() { 
    function addDrop() { 
     $(this).addClass("hovering"); 
     $(this).siblings().fadeTo("fast", 0.3); 
     $(this).fadeTo("slow", 1.0); 
    }; 

    function removeDrop() { 
     $(this).removeClass("hovering"); 
     $(this).fadeTo("fast", 1.0); 
    }; 

    var dropConfig = { 
     interval: 500, 
     sensitivity: 4, 
     over: addDrop, 
     timeout: 500, 
     out: removeDrop, 
    }; 

    $("li.drop").hoverIntent(dropConfig); 
}); 

CSSはここにある：

body { 
    margin:0px; 
} 
#wrapper { 
    width:1000px; 
    margin-right:auto; 
    margin-left:auto; 
    border:1px dotted #999; 
    height:800px; 
} 
#menu li { 
    display:inline; 
    border:1px solid #000; 
    padding-right:20px; 
    padding-left:20px; 
} 
#menu li a { 
    font-size:12px; 
    color:#666; 
    text-decoration:none; 
    font-weight:lighter; 
    font-family:arial; 
} 
#menu div { 
    display:none; 
} 
#menu li.drop div { 
    width:600px; 
    position:absolute; 
    background-color:#666; 
    left:auto; 
} 
#menu li.hovering div { 
    display:block; 
} 
#menu h2,ul#menu h3 { 
    font-size:12px; 
    font-weight:lighter; 
} 
#menu ul { 
    width:800px; 
    position: relative; 
} 

HTMLはここにある：

<div id="wrapper"> 
    <div id="dropMenu"> 
     <ul id="menu"> 
      <li class="drop"> 
       <a class="droplink" href="#">Home</a> 
       <div class="dropContainer"> 
        <h3> 1 </h3> 
        <p> 
         <a href="#">Shirts</a>, <a href="#">T-shirts</a>, <a href="#">Accessories</a>, <a href="#">More...</a> 
        </p> 
        <h3> Gifts </h3> 
        <p> 
         <a href="#">Sporting goods</a>, <a href="#">Gadgets</a>, <a href="#">More...</a> 
        </p> 
        <h3> Clearance! </h3> 
        <p> 
         40% off all photo accessories this weekend only. <a href="#">Don't miss out!</a> 
        </p> 
        <a href="#" class="more"> More stuff for him...</a> 
       </div> 
      </li> 
     </ul> 
    </div> 
</div> 

これ以上何時間も過ごしました。ありがとうございました。

Answer 1

CSS ...

ul#menu { margin:0; padding:0; } 

スペースは、すべての順不同のリストがあり、デフォルトのマージンから来ています。あなたはそれを削除する必要があります。

Answer 2

これはおそらくCSSリセットを使用してコードやCSSを開始するのには良い考えです - https://stackoverflow.com/questions/116754/best-css-reset。左の40ピクセルを削除するには、メインの "menu" divに0のパディング属性が必要なように見えます。