Я создал вкладку «Моя работа», которая перед моим выпадающим меню была последней вкладкой на панели навигации.Созданное мной раскрывающееся меню работает, но при наведении указателя мыши на одну из перечисленных категорий активный фон, который появляется, больше, чем текст, и всплывает из меню. Ищите способ уменьшить размер парения, если это возможно .Кроме того, когда я выровнял свою панель навигации и применил раскрывающийся список к вкладке, она стала первой вкладкой в навигации из последних.Хотелось бы узнать, сможет ли кто-нибудь выяснить, почему он переместился и как я могу это исправить.
До перемещения выпадающего меню оно было в нужном месте в последнем слоте вкладки, но не было правильно выровнено.Он был в отдельном теге <div> и был поднят выше других вкладок.Я изменил <div> на <li>, и это исправило мою проблему с выравниванием, но переместило вкладку вперед, как указано ранее.Я полагаю, что проблема с CSS заключается в двух средних классах, но я предоставил все классы.
.dropdown-content {
display: none;
position: fixed;
background-color: #f9f9f9;
min-width: 160px;
min-height: 50px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.4);
font-size: 25px;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
min-height: 25px;
}
.dropdown:hover .dropdown-content {
display: block;
}
<ul class = "left">
<li><a class="active" href="index.html">Home</a></li>
<li><a href="about.html">About Me</a></li>
<li><a href="resume.html">Resume</a></li>
<li class="dropdown">
<button class="dropbtn">My Work
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="ux.html">UX</a>
<a href="cplus.html">C++</a>
</div>
</li>
</ul>
Я ожидаю, что моя навигационная панель будет в порядке с «Моей работой» последней, и выпадающее меню, которое не парит вне себя.
