我花了几天时间试图将我的下拉菜单左对齐在他们父母的下方。我所知道的唯一 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;
}