Я чувствую, что схожу с ума здесь.
Я отодвинул слой 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>
Я часами ходил снова и снова. Еще раз спасибо.