html - 父项下的左对齐下拉菜单

Question

我花了几天时间试图将我的下拉菜单左对齐到他们的 parent 之下。我唯一知道的 CSS 和 HTML 是我在过去几天的过程中学到的，所以在你的回复中把我当成一个 child ，哈哈。您会看到，到目前为止，我只是通过记下每件事的含义而幸存下来...

这是我的博客，您可以看到它在做什么 crittndesign.blogspot.com 我最初创建菜单时只使用“特色产品”选项卡和下拉菜单。为了将下拉菜单对齐到父级下方，我在距离左侧多远的位置设置了一个实际值(68px 似乎可行)。它做了我暂时想要的，但后来我决定添加“Inspiration for...”选项卡，现在你看我需要真正解决我的问题并为菜单编写适当的代码以在它们自己的下方对齐父选项卡。

我的代码可能一团糟，因为我现在尝试了很多不同的东西，但我需要有人具体告诉我要更改什么才能使它正确!我读了很多关于需要将位置设置为“相对”或“内联 block ”的内容，但我显然不知道将其粘贴在哪里，因为一旦我删除固定位置，它总是会破坏下拉(左: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 填充以左对齐。