父项下的左对齐下拉菜单

Question

我花了好几天时间试图将下拉菜单左对齐到它们的父菜单下。唯一的CSS&HTML我知道这是我在过去几天里通过这个过程学到的，所以在你的回复中把我当成一个孩子，哈哈。你会发现，到目前为止，我只是通过记下一切的含义才活下来的。。。

这是我的博客，所以你可以看到它在做什么crittdesign.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;  
    }

Answer 1

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

.navigation ul{
 padding:0;
}

所有ul都有默认的填充和边距，所以对于父ul中丢弃的ul，它们应该有0个填充来向左对齐。

Answer 2

这就是你得到的所有css吗？有父母Css吗？你把位置分配给了吗
（身体）属性？您指定的所有位置都与当前位置相关。