我试图创建一个子菜单,当我们将鼠标放在它上面时出现。我做到了,但遗憾的是,当我把鼠标放在上面时,它与其他菜单链接不对齐。 谁知道如何解决这个问题?
http://i.stack.imgur.com/bAuSe.png http://i.stack.imgur.com/KXvQf.png
我想让主菜单的其他部分与“Serviços”菜单保持一致!
CSS菜单代码:
.cssmenu {
display: block;
}
.cssmenu > ul > li {
display:inline-block;
position: relative;
}
.cssmenu > ul > li.active a{
color:#ffffff;
background-color: rgb(239, 127, 27);
box-shadow: 0 6px rgb(191, 99, 14);
-webkit-box-shadow: 0 6px rgb(191, 99, 14);
-moz-box-shadow: 0 6px rgb(191, 99, 14);
-o-box-shadow: 0 6px rgb(191, 99, 14);
}
.cssmenu > ul > li span img {
vertical-align: middle;
}
.cssmenu > ul > li > a {
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-o-border-radius: 4px;
font-family: 'Cagliostro', sans-serif;
color: #555555;
display: block;
font-size: 16px;
line-height: 1.8em;
padding: 12px 28px;
text-transform:uppercase;
}
.cssmenu > ul > li.active a:hover{
color:#ffffff;
background-color: rgb(239, 127, 27);
box-shadow: 0 8px rgb(191, 99, 14);
-webkit-box-shadow: 0 6px rgb(191, 99, 14);
-moz-box-shadow: 0 6px rgb(191, 99, 14);
-o-box-shadow: 0 6px rgb(191, 99, 14);
-webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
-o-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
}
.cssmenu > ul > li > a:hover {
-webkit-transition: 0.9s;
-moz-transition: 0.9s;
-o-transition: 0.9s;
transition: 0.9s;
background-color: rgb(239, 127, 27);
box-shadow: 0 6px rgb(191, 99, 14);
-webkit-box-shadow: 0 6px rgb(191, 99, 14);
-moz-box-shadow: 0 6px rgb(191, 99, 14);
-o-box-shadow: 0 6px rgb(191, 99, 14);
color: #ffffff;
}
ul li ul{
display: none;
}
ul li:hover ul{
display: block;
}
HTML CODE:
<div class="cssmenu">
<ul>
<li class="active"><a href="index.html"><span>Inicio</span></a></li>
<li><a href="about.html"><span>Quem Somos</span></a></li>
<li><a href="staff.html"><span>Parceiros</span></a></li>
<li class="has-sub"><a href="service.html"><span>Serviços</span></a>
<ul>
<li> <a href="casamentos.html">CASAMENTOS </a> </li>
<li> <a href="aniversarios.html">ANIVERSÁRIOS </a> </li>
<li> <a href="batizados.html"> BATIZADOS </a> </li>
<li> <a href="comunhoes.html"> COMUNHÕES </a> </li>
</ul>
</li>
<li class="last"><a href="contact.html"><span>Contactos</span></a></li>
<div class="clear"></div>
</ul>
</div>
答案 0 :(得分:0)
快速回答。将position:absolute;
添加到ul li ul
。
CSS
ul li ul{
display: none;
position: absolute;
}
答案 1 :(得分:0)
以下是代码:http://jsfiddle.net/WLV7r/2/
.cssmenu > ul > li {float:left;}
您需要将菜单项浮动到彼此旁边。
您还需要将<div class="clear"></div>
置于<ul>
之外,使其符合XHTML标准。