1

ここで頭がおかしくなったような気がします。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>

私はこれを何度も何度も繰り返して何時間も費やしました。ありがとうございました。

4

2 に答える 2

1

css..。

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

スペースは、すべての順序付けされていないリストが持つデフォルトのマージンから来ています。あなたはそれを取り除く必要があります。

于 2011-12-30T08:16:59.107 に答える
0

コードやcssに着手する前にCSSリセットを使用することをお勧めします-https ://stackoverflow.com/questions/116754/best-css-reset。左側の40ピクセルを削除するには、メインの「メニュー」divに0のパディング属性が必要であるように見えます。

于 2011-12-30T08:27:18.757 に答える