Я провел дни, пытаясь выровнять выпадающие меню под родителями. Единственный CSS & HTML, который я знаю, это то, что я узнал в процессе за последние несколько дней, поэтому относитесь ко мне как к ребенку в ваших ответах, LOL. Вы увидите, что я до сих пор пережил это, сделав заметки о том, что все значит ...Выпадающее меню слева выравнивается под родительским
Вот мой блог, чтобы вы могли видеть, что он делает crittndesign.blogspot.com. Я начал с «Лучшего Продукты "вкладка & выпадаете, когда я изначально создал меню. Чтобы выровнять выпадающее изображение под родителем, я ставлю фактическое значение того, как далеко от него я хотел (68 пикселей, похоже, работало). В то время я делал то, что хотел, но потом решил добавить вкладку «Вдохновение для ...», и теперь вы видите, что мне нужно действительно исправить мою проблему и иметь правильное кодирование для меню, чтобы выровнять по их собственному родительские вкладки.
Мой код, вероятно, путаница, так как я пробовал так много разных вещей сейчас, но мне нужно, чтобы кто-то сказал мне, что нужно изменить, чтобы сделать все правильно! Я много читал о том, чтобы положение было либо «относительным», либо «встроенным блоком», но я, по-видимому, не знаю, где его придерживаться, потому что он всегда ломает падение, как только я удаляю фиксированную позицию (Left: 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;
}