私のCSSドロップダウンメニューは、さまざまなブラウザで奇妙な動作をします。Chrome(Windows)では正常に動作しますが、FirefoxとAndroidには問題があります。
Firefox:ドロップダウンメニューがメニュー項目の下ではなく右に開きます。また、「#naviagtion ul li ul」でクリッピングされないように「#naviagtionul li ul」で使用したパディングのため、ドロップダウンメニューがメニュー項目と一致していません。パディングを外すとメニュー項目が薄くなり、修正する方法が思いつかない。
Android:ドロップダウンメニューを表示すると、ドロップダウンメニューの要素間に白いギャップがあり、それらがどこから来ているのかわかりません。私はAndroidがそれをどのように処理するかについて知っているので、それが正常であるかどうか、またはコードが正しくないかどうかはわかりません。
これはコードです:https://jsfiddle.net/5rd2czfL/
HTML
<div id="navigation">
<ul>
<li><a href="#">MENU L1</a></li>
<li><a>MENU L2</a>
<ul>
<li><a href="#">Sub 1</a></li>
<li><a href="#">Sub 2</a></li>
</ul>
</li>
<li><a>MENU L3</a>
<ul>
<li><a href="#">Very long Sub 1</a></li>
<li><a href="#">Very long Sub 2</a></li>
<li><a href="#">Very long Sub 3</a></li>
</ul>
</li>
<li><a href="#">MENU L4</a>
</li>
<li><a href="">MENU L5</a></li>
<li class="menu-right"><a href="'">MENU R1</a></li>
<li class="menu-right"><a href="#">MENU R2</a></li>
</ul>
CSS
#navigation{
max-width: 1180px;
border-top: 1px solid;
border-bottom: 1px solid;
color: #0000ff;
width: 100%;
color: #000000;
padding: 10px;
margin: 5px 0px;
letter-spacing: 0.1em;
}
#navigation ul{
padding: 0px;
margin: 0px;
}
#navigation ul:after {
clear: both;
content: " ";
display: block;
}
#navigation ul li{
list-style: none;
float: left;
padding: 5px 0px;
-webkit-transition:color 0.2s linear, background 0.2s linear;
-moz-transition:color 0.2s linear, background 0.2s linear;
-o-transition:color 0.2s linear, background 0.2s linear;
transition:color 0.2s linear, background 0.2s linear;
}
#navigation ul li.menu-right{
float: right;
}
#navigation ul li a{
text-decoration: none;
padding: 0px 15px;
color: #000000;
cursor: pointer;
}
#navigation ul li ul{
min-width: 50px;
position: absolute;
display: inline;
visibility: hidden;
padding-top: 5px;
z-index: 1;
}
#navigation ul li:hover > ul{
visibility: visible;
}
#navigation ul li ul li{
float: none;
}
#navigation ul li:hover, #navigation ul li:hover > ul li{
color: #ffffff;
background-color: #555555;
}
#navigation ul li:hover a, #navigation ul li:hover > ul li a{
color: #ffffff;
}
#navigation ul li ul li:hover{
background-color: #777777;
}
問題は、位置に言及せずに絶対位置の要素があることです。position:relative
親に追加し、li
以下のように子要素に適切な位置を指定しました。
#navigation ul li{position:relative;}
#navigation ul li ul{
min-width: 50px;
white-space:nowrap;
position: absolute;
left:0;
top:20px;
display: inline;
visibility: hidden;
padding-top: 5px;
z-index: 1;
}
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加