Question

新手在这里。我正在使用html和css创建一个带子菜单的菜单。问题是当我设置.menu ul li:hover ul的行为时，子菜单的li的两个空白值是无处不在的！有一张图片显示了结果。我怎么能让它们消失？有什么帮助吗？

这是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>

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

Answer 1

<a href>代码中的错误

替换

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

与

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

子菜单显示鬼值

1 个答案: