CSS 下拉菜单跨浏览器

Question

我的 CSS 下拉菜单在不同的浏览器中表现异常。它在 Chrome (Windows) 中运行良好，但在 Firefox 和 Android.

中存在问题

火狐：下拉菜单在菜单项的右侧而不是下方打开。此外，下拉菜单与菜单项不一致，因为我在“#naviagtion ul li ul”中使用了填充，以防止它与“#navigation ul li”剪裁。删除填充会使菜单项变薄，我想不出任何方法来修复它。

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;
}

Answer 1

问题是，您有绝对定位的元素，但没有提及任何位置。我已将 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;
}

DEMO

CSS 下拉菜单跨浏览器

CSS dropdown menu cross-browser

html

css

cross-browser

drop-down-menu