Я пытаюсь добавить меню на комбинированный фон.Но когда я вкладываю фон с меню внутри него, они не работают совместно и не выравниваются правильно.Например, когда я перемещаю одно из меню влево, остальные начинают двигаться в другом направлении.Сейчас я действительно пытался решить эту проблему, но сейчас мне кажется, что единственный способ - настроить каждый из них, пока все не будут выровнены правильно.Итак, вот мой вопрос сегодня:
Как я могу заставить эту работу работать, не настраивая каждое меню снова и снова?
Вот код CSS и HTML
.baked a:hover{text-decoration: none;
color: white;
text-shadow: 1px 1px 1px blue;
}
.baked { list-style-type: none;
float: left;
margin-top: 15px;
margin-left: -20px;
}
.baked li ul {position: absolute;
display: none;}
.baked li{font-family: Berlin Sans FB;
}
.baked li:hover ul { background: silver;
display: block;
box-shadow: inset 0px 12px 15px -2px purple;
list-style-type: none;
width: 400px;
height: 100px;
}
.baked li>a{color: white;
font-size: 12px}
<ul class="baked">
<li>
<a href="PointerIndex.html">PointerIndex</a>
<ul>
<li><a href="Reflections.html">Reflections</a></li>
<li><a href="Practicing.html">Practicing</a></li>
<li><a href="NewsFeed.html">NewsFeed</a></li>
<li><a href="ExArt.html">Explanatory Art</a></li>
<li><a href="TopAi.html">Top AI</a></li>
</ul>
</li>
</ul>
Обратите внимание, что у меня есть в общей сложности 9 из этих меню, все из которых содержатся в следующем div
div.Console{background: gray;
display: block;
box-shadow: 0px -20px 5px -10px #692, 0px 20px 5px -10px lightblue, 15px 0px 5px -2px #942, -15px 0px 5px -2px #249;
border-radius: 24pt;
list-style-type: none;
width: 300px;
margin-top: -100px;
margin-left: 30px;
height: 50px;
}