CSS dropdown menu cross-browser

My CSS dropdown menu behaves strange in different browsers. It works fine in Chrome (Windows) but there are issues in Firefox and on Android.

Dropdown menu opens up to the right of the menu item instead of below.
Also, the dropdown menu is not in line with the menu item because of the padding I used in ‘#naviagtion ul li ul’ to prevent it from clipping with ‘#navigation ul li’. Removing the padding makes the menu items to thin and I can’t think of any ways to fix it.

When displaying the dropdown menu there are white gaps between the elements in my the dropdown menu and I have no idea where those come from.
I have know idea about how Android handles that so I don’t know if it’s normal or if the code isn’t correct.

This is the code: https://jsfiddle.net/5rd2czfL/


<div id="navigation">
    <li><a href="#">MENU L1</a></li>
    <li><a>MENU L2</a>
            <li><a href="#">Sub 1</a></li>
            <li><a href="#">Sub 2</a></li>
    <li><a>MENU L3</a>
            <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>
    <li><a href="#">MENU L4</a>
    <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>


    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;

Source: cross-browser

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.