Question

我花了几天的时间试图将我的下拉菜单留在父母的下面。唯一的CSS＆amp;我知道的HTML是我在过去几天通过这个过程学到的东西，所以在你的回答中像对待孩子一样对待我，哈哈。你会看到，到目前为止，我只是通过记录一切意味着什么而幸存下来......

这是我的博客，所以你可以看到它正在做什么crittndesign.blogspot.com我开始时只使用了“特色产品”标签＆amp;我最初创建菜单时下拉。为了在父母下面对齐下拉，我把一个实际值放在我想要的距离左边（68px似乎工作）。它做了我想要的暂时，但后来我决定添加“Inspiration for ...”选项卡，现在你看到我需要实际解决我的问题并对菜单进行正确的编码以便在他们自己的对齐下父标签。

我的代码可能是一团糟，因为我现在尝试了很多不同的东西，但是我需要有人告诉我具体要改变什么来使它正确！我读了很多关于需要这个位置是“相对”还是“内联块”但我显然不知道在哪里坚持下去因为它一旦我移除固定位置就会打破下拉（左：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？你有没有定位到
（身体）属性？您指定的所有定位都与该位置相关。

父对齐下的左对齐下拉菜单

2 个答案: