jquery - 使用 jQuery 根据父位置在子 li 上设置边距

标签 jquery css

我正在开展一个元素,我们正在抓取网站并提取内容,因此我无法控制 div 或 lis 的结构。

我遇到的问题是菜单上的下拉菜单没有与父菜单项左对齐。我正在寻找一些有助于解决此问题的 css/jquery,here's a link to the fiddle: http://jsfiddle.net/9gQCH/3/

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> 

最佳答案

http://jsfiddle.net/9gQCH/7/

使用 JQuery

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

关于jquery - 使用 jQuery 根据父位置在子 li 上设置边距,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13424406/

相关文章:

jquery窗口滚动函数到一个id然后做一些事情

html - CSS 防止表格单元格垂直扩展

javascript - 使用javascript获取数组中的所有css根变量并更改值

html - Bootstrap 文本旁边的按钮

javascript - 带 Raphaeljs 的方形模拟时钟

javascript - 端点位置未在 jsPlumb 调整大小中更新

html - 将鼠标悬停在一个词上并显示相关图像

html - 如何使用 CSS 使 div 上的滚动条变粗?

ajax - 标准表单提交与 Ajax 表单提交 - 浏览器自动保存/建议用户输入

javascript - 如何从 ajax-jquery 请求中获取 php 函数的结果