Search code examples
htmlcssmenusubmenu

Submenu showing ghost values

Newbie here. I'm creating a menu with submenus using html and css. The problem is that when i set the behaviour of the .menu ul li:hover ul two blank values for the li of the submenu are created out of nowhere! There's a picture showing the result. How can i make them go away? Any help?

Here's the html:

<!DOCTYPE html>
<html>
    <head>
        <title>RBR motos</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <link rel="stylesheet" type="text/css" href="styleSheet.css" />
        <link rel="stylesheet" type="text/css" href="menu.css" />

    </head>
    <body>
        <div id="headerMain" class="shadow"><h1><h1><span class="rbr">RBR</span> <span class="moto">moto peças</span> CommerceADM</h1></div>
        <nav id="menu" class="menu shadow">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Cadastro
                        <ul>
                            <li><a href="#">Cliente</a></li>
                            <li><a href="#">Moto</a></li>
                            <li><a href="#">Peça</a></li>
                            <li><a href="#">Fornecedor</a></li>
                            <li><a href="#">Funcionário</a></li>
                        </ul>
                    </a></li>
                <li><a href="#">Loja
                        <ul>
                            <li><a href="#">Venda</a></li>
                            <li><a href="#">OS</a></li>
                            <li><a href="#">Orçamento</a></li>
                            <li><a href="#">Caixa</a></li>
                            <li><a href="#">Estoque</a></li>
                        </ul>
                    </a></li>
                <li><a href="#">Busca
                        <ul>
                            <li><a href="#">Cliente</a></li>
                            <li><a href="#">Moto</a></li>
                            <li><a href="#">Peça</a></li>
                            <li><a href="#">Fornecedor</a></li>
                            <li><a href="#">Funcionário</a></li>
                            <li><a href="#">OS</a></li>
                            <li><a href="#">Orçamento</a></li>
                        </ul>
                    </a></li>
                <li><a href="#">Agenda</a></li>
                <li><a href="#">Ajuda</a></li>

            </ul>
        </nav>

        <div id="footer" class="shadow">CommerceADM - Beta 1.0 - Jorge Andrade 2015 - Suporte e direitos de copia: jacandrade@gmail.com</div>
    </body>

and the css:

.menu{
    list-style:none;  
    height: 3em;
    display: block;
    margin-top: 10px; 
    margin-bottom: 10px;
    padding: 2px;
    font-size: 1.2em;

}
a{
    text-decoration: none;
}

.menu ul li{

    float: left;
    position: relative;
    margin-left: 5px;

}
.menu ul li:first-child{
    margin-left: 0;
}

.menu ul li a{
    color: #ffffff;
    padding: 5px 10px;
    background: #999999;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;

}

.menu ul li a:hover { 
    background:#333;
    color:#5E8A8A;

}

.menu ul li  ul{
    visibility: hidden;
    position: absolute;
    left: 0;
    top: 23px;
    padding: 4px 7px;


}


.menu ul li:hover ul{
    visibility: visible;
    text-align: left;

}

.menu ul li ul li{

    display: block;
    font-size: 12px;
    margin-bottom: 15px;
}

image

Solution

  • Error in <a href> tags

    Replace

    <a href="#">Cadastro
                        <ul>
                            <li><a href="#">Cliente</a></li>
                            <li><a href="#">Moto</a></li>
                            <li><a href="#">Peça</a></li>
                            <li><a href="#">Fornecedor</a></li>
                            <li><a href="#">Funcionário</a></li>
                        </ul>
                    </a></li>

    with

    <a href="#">Cadastro </a>
<ul>
  <li><a href="#">Cliente</a></li>
  <li><a href="#">Moto</a></li>
  <li><a href="#">Peça</a></li>
  <li><a href="#">Fornecedor</a></li>
  <li><a href="#">Funcionário</a></li>
</ul>