0
ページを実行しているときにブラウザーのサイズを変更するときに問題が発生する/モバイル上で、ドロップダウンメニューが非集中化してページから外れてしまいます。私は自分のパディングレベルを修正しなければならないと思うが、私がどこにいていつ持っているのか分からない。ブラウザをリサイズするときにドロップダウンメニューを中央に配置するとき
助けてください！
[
$('.drop-down').click(function() {
\t $(this).hide();
\t });
\t $('.nav-main li').click(function() {
\t $('.drop-down').hide();
\t });
\t //drop down slide down
\t \t $('.nav-main li ul').hide().removeClass('.drop-down');
\t \t $('.nav-main li').hover(
\t \t \t function openDrop() {
\t \t \t $('ul', this).stop().slideDown(900);
\t \t }, function closeDrop() {
\t \t \t $('ul', this).stop().slideUp(1000);
\t \t });
\t.nav-main {
\t position: absolute;
\t top: 0;
\t height: 65px;
\t width: 100%;
\t text-align: center;
}
.nav-main ul {
\t position: relative;
\t margin: 0 auto;
\t padding: 0;
\t list-style: none;
\t font-size: 22px;
\t line-height: 100%;
\t font-family: 'Futura W01 Bold', sans-serif;
\t text-align: center;
\t text-transform: uppercase;
\t display: inline-block;
\t width: 100%;
}
.nav-top {
\t position: relative;
\t margin: 0;
\t padding: 0 66px 0 50px;
\t float: none;
\t display: inline-block;
\t list-style: none;
}
.nav-top:first-child {
\t padding-left: 0;
}
.nav-top:last-child {
\t background-image: none;
\t padding-right: 0;
}
.nav-top:last-child:after {
\t content: none;
}
.nav-top > a {
\t position: relative;
\t display: block;
\t margin: 0;
\t color: #6f6f6f;
\t text-decoration: none;
\t padding-top: 20px;
\t padding-bottom: 5px;
\t -moz-transition: all 0.3s ease;
\t -ms-transition: all 0.3s ease;
\t -o-transition: all 0.3s ease;
\t transition: all 0.3s ease;
}
.nav-top a:hover,
.nav-top.active > a {
\t color: #454545;
\t border-bottom: 4px solid #00e9d9;
\t text-decoration: none;
}
.nav-top ul {
display: none;
position: absolute;
left: -8.75px;
width: 105%;
top: calc(100% - 1px);
border-bottom-left-radius: .3em;
border-bottom-right-radius: .3em;
}
.nav-top:hover ul {
position: absolute;
top: calc(100% - 1px);
left: -8.75px;
width: 105%;
}
.nav-top li {
float: center;
background-color: #e9e9e9;
padding-top: 16px;
padding-bottom: 10px;
text-align: inherit;
}
.nav-top li:last-child {
\t padding-bottom: 16px;
\t border-bottom-left-radius: .3em;
border-bottom-right-radius: .3em;
}
.nav-top li > a {
\t position: relative;
\t display: inline;
\t margin: 0;
\t color: #6f6f6f;
\t text-decoration: none;
\t padding-top: 20px;
\t padding-bottom: 1px;
\t -moz-transition: all 0.3s ease;
\t -ms-transition: all 0.3s ease;
\t -o-transition: all 0.3s ease;
\t transition: all 0.3s ease;
}
.nav-top:after {
display: block;
position: absolute;
left: 100%;
top: -17px;
width: 22px;
z-index: 1;
transform: translateX(-50%);
height: 100%;
-ms-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="nav-main" role="navigation">
\t \t \t \t \t \t <ul>
\t \t \t \t \t \t \t <li class="nav-top"><a href="#welcome">Welcome</a></li>
\t \t \t \t \t \t \t <li class="nav-top"><a href="#about">About</a>
\t \t \t \t \t \t \t \t <ul class="drop-down">
\t \t \t \t \t \t \t \t \t <li class="nav-drop"><a href="#about">Services</a></li>
\t \t \t \t \t \t \t \t \t <li class="nav-drop"><a href="#client">Clients</a></li>
\t \t \t \t \t \t \t \t \t <li class="nav-drop"><a href="#press">Press</a></li>
\t \t \t \t \t \t \t \t \t <li class="nav-drop"><a href="#leadership">Leadership</a></li>
\t \t \t \t \t \t \t \t \t <li class="nav-drop"><a href="#twitter">Follow Us</a></li>
\t \t \t \t \t \t \t \t </ul>
\t \t \t \t \t \t \t </li>
\t \t \t \t \t \t \t <li class="nav-top"><a href="#contact">Contact</a></li>
\t \t \t \t \t \t </ul>
\t \t \t \t \t \t <span class="nav-arrow"></span>
\t \t \t \t \t </nav>] 3
メニューのフォントサイズを小さくするには、特定のブレークポイントでメディアクエリが必要なようです。 – zgood
どうすればいいですか？そして、あなたはそれが何をするのか説明できますか？ –