1

我觉得我在这里失去了理智。我已将 css 逐层剥离到最低限度，并且列表仍然显示，好像包装器具有大约 50 像素的左填充。我在这里使用了一些 jQery，但我看不出它会如何影响列表和相关的 div 放置方式。如果有人能找出罪魁祸首，我将不胜感激。我在下面的代码中只包含了一个列表项。他们都是一样的。

该页面在这里：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

its probably a good idea to use a CSS reset before embarking on any code and css - https://stackoverflow.com/questions/116754/best-css-reset. It looks to me like your main "menu" div needs a padding attribute of 0 to remove the 40 pixels on the left.

于 2011-12-30T08:27:18.757 回答