使用jQuery根据父位置设置子li的边距

我正在做一个项目，我们正在抓取一个站点并插入内容，因此我无法控制div或lis的结构

我遇到的问题是菜单上的下拉列表没有与父菜单项对齐。我正在寻找一些css/jquery来帮助解决这个问题

CSS和HTML

    #item1, #item2 {        
       background-color:#efefef;           
       display:inline;
       font-size:14px;
       margin-right:3px; 
       padding:5px; 
    }

    .Submenu {
        display: none;
        padding: 4px; 
        margin-top:18px;
        background-repeat:no-repeat;
    }  

    .Menu li:hover .Submenu{
        background-color:orange;
        display:inline;
        color: black;
        padding: 3px 5px;
        position:absolute;
    }



    <div class="Menu">
    <li id="item2">
        High level Item 1
        <div class="Submenu">
            <div>
                   Nested Item 1         
            </div> 
            <div>
                   Nested Item 2       
            </div>         
        </div>
    </li>  

    <li id="item2">
        High level Item 2
        <div class="Submenu">
            <div>
                   Nested Item 3         
            </div> 
            <div>
                   Nested Item 4       
            </div>         
        </div>
    </li> 
    </div> 

#item1，#item2{
背景色：#EFEF；
显示：内联；
字体大小：14px；
右边距：3倍；
填充物：5px；
}
.子菜单{
显示：无；
填充：4px；
边缘顶部：18px；
背景重复：无重复；
}  
.菜单li：悬停.子菜单{
背景颜色：橙色；
显示：内联；
颜色：黑色；
填充物：3px 5px；
位置：绝对位置；
}

高级别项目1
嵌套项1
嵌套项2


高级别项目2
嵌套项目3
嵌套项目4

这不需要jQuery。只需将其添加到CSS中：

.Menu li { position: relative; }

更新（将

左：0；

添加到您的

子菜单

类）：

。菜单li：悬停。子菜单{
背景颜色：橙色；
显示：内联；
颜色：黑色；
填充物：3px 5px；
位置：绝对位置；
左：0；//

使用JQuery

$(".Submenu").each(function(){
    $(this).css("left",$(this).parent().offset().left);
});​

很抱歉。li里面的DIV没有ul？你的结构很奇怪。
DIV
li里面的DIV

s很好，但是你肯定需要将你的

li

s包装在

ul

标签中。为什么不在子菜单中使用

ul

？我很想使用ul，但是，因为页面已经被废弃了从另一个站点，我无法控制它。@AndrewK啊，是的，忘记了刮削位。不完全是我要找的，我想将整个子菜单向左对齐，使其与父项的左侧对齐，谢谢。它就是这样做的。你看到了什么？（检查小提琴）我在子菜单上看到文本换行为seocond行，但仅此而已，您使用的是什么浏览器，我使用的是Chrome。谢谢，这也很有效，请欣赏，使用上面的纯css选项，但这是一个很好的选择

$(".Submenu").each(function(){
    $(this).css("left",$(this).parent().offset().left);
});​