Question

我觉得我在这里失去了理智。我已经逐层将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>

我花了好几个小时一遍又一遍。再次感谢你。

Answer 1

...的CSS

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

空间来自每个无序列表的默认边距。你需要删除它。

Answer 2

在启动任何代码和css - https://stackoverflow.com/questions/116754/best-css-reset之前使用CSS重置可能是个好主意。它看起来像你的主菜单＆＃34; div需要填充属性为0才能删除左侧的40个像素。

无序列表受到神秘格式的影响

2 个答案: