1
Новичок здесь. Я создаю меню с подменю, используя 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: [email protected]</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;
}
http://postimg.org/image/7oqxt94vx/ Изображение объяснение –
Ваш HTML выглядит немного странно ... вы должны быть закрывающей анкерные связи перед открытием подменю 'ul' –
wow - так глупо, хахахаха! Большое спасибо Pauli_D! Задача решена! –