Question

我试图创建一个子菜单，当我们将鼠标放在它上面时出现。我做到了，但遗憾的是，当我把鼠标放在上面时，它与其他菜单链接不对齐。谁知道如何解决这个问题？

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>

Answer 1

快速回答。将position:absolute;添加到ul li ul。

Have a fiddle!

CSS

ul li ul{
    display: none;
    position: absolute;
}

Answer 2

以下是代码：http://jsfiddle.net/WLV7r/2/

  .cssmenu > ul > li {float:left;}

您需要将菜单项浮动到彼此旁边。您还需要将<div class="clear"></div>置于<ul>之外，使其符合XHTML标准。

出现子菜单时菜单未对齐

2 个答案: