父项下的左对齐下拉菜单答案

【问题标题】：Left align drop down menu under parent父项下的左对齐下拉菜单
【发布时间】：2013-02-22 03:46:13
【问题描述】：

我花了几天时间尝试将我的下拉菜单左对齐在他们父母的下方。我所知道的唯一 CSS 和 HTML 是我在过去几天中通过这个过程学到的东西，所以在你的回复中把我当作孩子一样对待，哈哈。你会看到，到目前为止，我只是通过记下所有内容的含义而幸存下来......

这是我的博客，因此您可以看到它在做什么 crittndesign.blogspot.com 我最初创建菜单时只使用“特色产品”选项卡和下拉菜单。为了对齐父级下方的下拉菜单，我将实际值放在我想要的距离左侧多远（68px 似乎有效）。它暂时完成了我想要的，但后来我决定添加“灵感...”选项卡，现在你看到我需要真正解决我的问题，并为菜单设置正确的编码，使其左对齐父标签。

我的代码可能是一团糟，因为我现在尝试了很多不同的东西，但我需要有人具体告诉我要更改哪些内容才能使其正确！我读了很多关于需要将位置设置为“相对”或“内联块”的内容，但我显然不知道将其粘贴在哪里，因为它总是在我移除固定位置后立即打破下拉（左：68px )。让我知道您是否需要任何其他信息以帮助我解决问题！

提前致谢！！

CSS

    .navigation ul ul { 
        display: none;
    }
    .navigation ul li:hover > ul {
        display: block;
    }
    .navigation li ul {    
        position: absolute;  /*makes the list actually drop down*/
        z-index:100;    /*makes it stay visible when moving mouse down to it*/
        left: -999em;    /*em=scaleable*/
        width: 165px;    /*width of drop down box*/
        margin: 19px 0 0 0; 
        padding: 0; 
    }
    .navigation li:hover ul {   
        left: 68px;    /* position of drop down menu aligned under parent */
    }
    .navigation li li a {    /*how the drop down menu itself looks*/
        display: block; 
        background: #663300; 
        width: 140px;     /*width of background color on drop down*/
        color: #FF9900; 
        font:normal 12px Helvetica, sans-serif; 
        padding: 9px 13px 12px 12px; 
        text-decoration: none; 
        text-align:center;
        border-bottom: 2px dotted #060505; /*dotted line under each menu item in drop down*/
    }
    .navigation li li a:hover { /*how the drop down menu looks when hovered over*/
        background: #060505; 
        color: #FFFFFF;  
        margin: 0; 
        padding: 9px 13px 12px 12px; /*for the list names when hovered over them*/
        text-decoration: bold; 
        border-bottom: 1px #060505; 
        text-align:center;
        box-shadow: inset 0 0 10px #222222, inset 0 10px 10px #222222;
    } 
    li:hover > a { /*Color all hovered links, and keep menu item colored when hovering sub-menu*/ 
        background-color: #663300; 
    } 
    .navigation li ul ul { 
        /*margin: -35px 0 0 145px;*/
    } 
    .navigation li:hover ul ul { 
        left: -9999em; 
    } 
    .navigation li ul li:hover ul { 
       left: auto;  
    }

【问题讨论】：

标签： html css drop-down-menu parent-child

【解决方案1】：

我不知道你的标记，但试试这个...

.navigation ul{
 padding:0;
}

所有的 ul 都有默认的 padding 和 margin，所以对于在父 ul 中被丢弃的 ul，它们应该有 0 的 padding 来向左对齐。

【讨论】：

【解决方案2】：

这就是你得到的所有 css 吗？任何父CSS？您是否已将定位分配给
（身体）属性？您指定的所有位置都是相对于当前位置的。

【讨论】：