-3
実際の小さな画面に移動すると、私のモバイルバージョンのナビゲーションドロップダウンメニューが何らかの理由で助けてくれることを願っています。画面が大きくなると問題はありませんが、ブラウザーが最小になると、「ツアーとDaytours」のナビゲーションが半分になります。私は問題が.dropdownの中にあると思う。：.dropdown-menuクラスを動かすが、それを修正する方法がわからない。レスポンシブなドロップダウンナビゲーションの問題
function myFunction() {
document.getElementsByClassName("Menu")[0].classList.toggle("responsive");
}/*hide all list items, except for the first one ("Home").
\t Show the list item that contains the link to
\t open and close the topnav (li.icon) */
.Menu li:not(:first-child) {
display: none;
border-bottom: none;
}
.Menu li.icon {
float: right;
display: inline-block;
}
/* The "responsive" class is added to the Menu with JavaScript
\t when the user clicks on the icon. This class makes the Menu look good
\t on small screens */
.Menu.responsive {
position: relative;
}
#TA_socialButtonIcon936 {
width: 28px;
height: 28px;
display: inline-flex;
overflow: hidden;
position: relative;
float: none;
}
.Menu {
margin-top: 15px;
width: 54%;
overflow: hidden;
}
.Menu.stick {
margin-top: 10px;
}
.Menu.responsive li.icon {
position: absolute;
right: 0;
top: -4px;
border: none;
}
.Menu.responsive ul li.icon a {
border-bottom: none;
}
.Menu.responsive li {
float: none;
display: inline;
}
.Menu.responsive li a {
display: block;
text-align: left;
background-color: #161616;
border-bottom: solid 1px #FFFFFF;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/*Dropdown arrow for link items*/
.caret {
display: inline-block;
width: 0;
height: 0;
margin-left: 2px;
vertical-align: middle;
border-top: 4px dashed;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-menu {
position: absolute;
visibility: hidden;
min-width: 100px;
background-color: #161616;
opacity: 0;
-webkit-transition: opacity 0.4s ease-in-out;
-moz-transition: opacity 0.4s ease-in-out;
transition: opacity 0.4s ease-in-out;
}
/* links inside the dropdown*/
.dropdown-menu a {
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
border-top: solid 1px #FFFFFF;
border-right: solid 1px #FFFFFF;
margin-top: 0px;
}
.dropdown-menu a:last-child {
border-top: 0;
}
/* Change color of dropdown links on hover */
.dropdown-menu a:hover {
color: #755378;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-menu {
visibility: visible;
right: auto;
left: -151px;
bottom: -47px;
opacity: 1;
}<div class="Menu">
<!--Nav-menu-->
<!--Social media button-->
<div id="TA_socialButtonIcon936" class="TA_socialButtonIcon">
<ul id="Ug7Rjth" class="TA_links amVFTKsFPp">
<li id="pyCAn7LGV" class="eYF1SLHKaeE">
<a target="_blank" href="https://www.tripadvisor.com/Attraction_Review-g312578-d2284717-Reviews-Felleng_Day_Tours-Johannesburg_Greater_Johannesburg_Gauteng.html">
<img src="https://www.tripadvisor.com/img/cdsi/img2/branding/socialWidget/20x28_white-21690-2.png" alt="media-icon" />
</a>
</li>
</ul>
</div>
<!--End Social media button-->
<ul>
<!--Start Main ul-->
<li><a href="#">Home</a>
</li>
<li><a href="#">About Us</a>
</li>
<li class="dropdown">
<a class="DropDown-toggle" data-toggle="dropdown" href="#">Tours <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Tours</a>
</li>
<li><a href="#">Day Tours</a>
</li>
</ul>
</li>
<li><a href="#">Contact Us</a>
</li>
<li class="icon"><a href="javascript:void(0);" onClick="myFunction()">☰</a>
</li>
</ul>
<!--End main ul-->
</div>
<!--End Nav-menu-->
スニペットを確認しましたか？あなたが写真にどのように持っているかと同じようには表示されません。あなたは[mcve]を使って複製可能な正確な問題を作りますか？ –
コードをスタックオーバーフローに実装する方法が必ずしもわからないのはごめんなさい。これは私の敏感なCSSのページでした私は私のメインのCSSスタイルシートも与えている必要がありますか？しかし、反対側では、.Menuクラスからオーバーフローを除去してナビゲーションを修正することができました。 – Frana