Question

I feel like I’m losing my mind here.
I’ve peeled back the css layer by layer to its bare minimum, and the list still displays as though the wrapper has about 50 pixels of left padding.
I’m using some jQery here, but I don’t see how it would be affecting the list and associated div placement the way it is.
If anyone can spot the culprit, I would really appreciate it.
I only included one list item in the code below. They’re all identical.

The page is here: http://www.tpan.com/testing/custom.html

The Javascript is here:

$(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);
});

the css is here:

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;
}

the html is here:

<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>

I’ve spent hours going over and over this. Thank you again.

Answer 1

css…

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

The space is coming from the default margin that every unordered list has. You need to remove that.