ОК, давайте решать проблему шаг за шагом.Сначала перейдите к точке, в которой вы сказали:
пробовал либо статически (в пикселях), либо без процента.
Это потому, чтопроблема была вызвана: transition: linear 0.2s; в вашем nmbutoni классе.Когда вы удалите эту строку и установите для отступов nmbutoni и meny какое-то статическое (px) значение, оно будет работать частично.Посмотрите на фрагмент ниже:
.meny {
background-color: #282828;
border-radius: 10%;
border: none;
color: white;
padding: 16px;
text-align: center;
text-decoration: none;
font-size: 100%;
float: none;
}
.nmbutoni {
background-color: #282828;
border-radius: 10%;
border: none;
color: white;
padding: 16px;
text-align: center;
text-decoration: none;
font-size: 100%;
float: none;
}
/* Smartphones (portrait & landscape) */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
.nmbutoni {
padding: 18% 37%;
}
footer {
text-align: center;
margin: auto;
background-color: #282828 !important;
width: 70% !important;
color: white;
}
#googleMap {
width: 500px !important;
height: 300px !important;
}
}
/* position of main menu */
.nenmeny {
position: relative;
display: inline-block;
}
/* dropdown content (default hidden) */
.nenmeny-content {
display: none;
position: absolute;
background-color: #f1f1f1;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
min-width: 155px;
z-index: 1;
}
/* Links inside dropdown menu*/
.nenmeny-content a {
color: black;
padding: 7% 9%;
/*12px 16px*/
text-decoration: none;
display: block;
}
/* Hover color change */
.nenmeny-content a:hover {
background-color: #ddd
}
/* Displaying content on hover */
.nenmeny:hover .nenmeny-content {
display: block;
}
/* Bgcolor change on dropdown hover */
.nenmeny:hover .nmbutoni {
background-color: black;
color: #FFB849;
}
<a href="#" class="meny active">Ballina</a>
<a href="lajme.html" class="meny">Lajme</a>
<a href="ekipet.html" class="meny">Ekipet</a>
<a href="sponsor.html" class="meny">Sponzorët</a>
<div class="nenmeny">
<button class="nmbutoni">Për ne</button>
<div class="nenmeny-content">
<a href="rrethparkour.html">Sporti Parkour</a>
<a href="historia.html">Historia jonë</a>
<a href="kontakti.html">Kontakti</a>
</div>
</div>
Однако, если вы посмотрите внимательно, кнопка не совсем соответствует другим ссылкам, тем не менее, размер кнопки немного больше сверху.Это потому, что button является элементом формы.Таким образом, он работает не так, как другие элементы.Итак, здесь проблема.
И еще одна проблема - когда вы используете процент, тогда они работают по-разному, потому что % относительно родительского элемента и родителя nmbutoni и meny в этом случае не совпадают.
Итак, чтобы решить первую проблему, мы просто заменим <button> на тег <a>, как предложено Nandita Arora Sharma тоже в своем ответе, так что все ссылки становятся похожими, поэтому нет проблем с наличием элементов формы.
И, для решения 2-й задачи мы не будем использовать %, а скорее использовать vw, что соответствует 1% ширины окна просмотра, т.е. размер окна браузера .
Итак, вот полное решение с чистым кодом:
body {
margin-top: 20px;
}
.meny {
background-color: #282828;
text-decoration: none;
color: white;
border-radius: 3px;
padding: 1vw;
font-size: 1em;
border: none;
cursor: pointer;
}
.nmbutoni {
background-color: #282828;
color: white;
padding: 1vw;
font-size: 1em;
font-family: inherit;
border-radius: 3px;
border: none;
cursor: pointer;
}
.nenmeny {
position: relative;
display: inline-block;
}
.nenmeny-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 155px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.nenmeny-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.nenmeny-content a:hover {
background-color: #ddd
}
.nenmeny:hover .nenmeny-content {
display: block;
margin-top: 1vw;
}
.nenmeny:hover .nmbutoni {
background-color: black;
color: #FFB849;
}
<a href="#" class="meny">Ballina</a>
<a href="lajme.html" class="meny">Lajme</a>
<a href="ekipet.html" class="meny">Ekipet</a>
<a href="sponsor.html" class="meny">Sponzorët</a>
<div class="nenmeny">
<a class="nmbutoni">Për ne</a>
<div class="nenmeny-content">
<a href="rrethparkour.html">Sporti Parkour</a>
<a href="historia.html">Historia jonë</a>
<a href="kontakti.html">Kontakti</a>
</div>
</div>
Надеюсь, это решит вашу проблему.