0

我有一个用 HTML 和 CSS 制作的水平菜单（即使项目在 .NET framework-asp 和 c# 上），它应该在悬停时显示垂直子菜单项。但这并没有发生，因为子菜单项水平对齐并打乱了布局的其余部分，并影响了不希望的设计。

到目前为止，这是我的代码：

HTML：

<div id="menu">
    <ul>
        <li>
            <a href="#">Home</a>
        </li>
        <li>
            <a href="#">About Us</a>
            <ul class="firstLevel">
                <li>
                    <a href="#">The Team</a>
                </li>
                <li>
                    <a href="#">History</a>
                </li>
                <li>
                    <a href="#">Vision</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">Products</a>
            <ul class="firstLevel">
                <li>
                    <a href="#">Cozy Couch</a>
                </li>
                <li><a href="#">Great Table</a>

                </li>
                <li>
                    <a href="#">Small Chair</a>
                </li>
                <li>
                    <a href="#">Shiny Shelf</a>
                </li>
                <li>
                    <a href="#">Invisible Nothing</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">Contact</a>
            <ul class="firstLevel">
                <li>
                    <a href="#">Online</a>
                </li>
                <li>
                    <a href="#">Right Here</a>
                </li>
                <li>
                    <a href="#">Somewhere Else</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">Account</a>
            <ul class="firstLevel">
                <li>
                    <a href="#">Login</a>
                </li>
                <li>
                    <a href="#">Register</a>
                </li>
            </ul>
        </li>
    </ul>
</div>

CSS：

#menu ul {
   clear:left;
   float:left;
   list-style:none;
   margin:0;
   padding:0;
   position:relative;
   left:50%;
   text-align:center;


}
#menu ul li {
    display:block;
   float:left;
   list-style:none;
   margin:0;
   padding:0;
   position:relative;
   right:50%;    
}
#menu li ul {
    position:relative;

}
#menu ul li a {
   display:block;
   margin:0 0 0 1px;
   padding:3px 10px;
   background:#ddd;
   color:#000;
   text-decoration:none;
   line-height:1.3em;
}
#menu ul li a:hover {
   background:#369;
   color:#fff;
}

#menu ul li a.active,
#menu ul li a.active:hover {
   color:#fff;
   background:#000;
   font-weight:bold;
}

li:hover ul {
    display: block;
    position: absolute;

}

这是它的显示：

4

1 回答 1

1

jsfiddle在这里http://jsfiddle.net/Ec98p/

试试这个 CSS

#menu{
    border:1px solid red;
    height:30px;

}
#menu ul {
list-style:none;
   margin:0;
   padding:0;
   position:relative;

   text-align:center;


}
#menu ul li {
    display:block;
   float:left;
   list-style:none;
   margin:0 2px 0 0;
   padding:0;
   position:relative;

}
#menu li ul {
    position:absolute;
    display:none;
    border:1px solid green;

}
#menu ul li a {
   display:block;
   margin:0 0 0 1px;
   padding:3px 10px;
   background:#ddd;
   color:#000;
   text-decoration:none;
   line-height:1.3em;
}
#menu ul li a:hover {
   background:#369;
   color:#fff;
}

#menu ul li a.active,
#menu ul li a.active:hover {
   color:#fff;
   background:#000;
   font-weight:bold;
}

#menu ul li:hover ul {
    display: block;
 }
#menu ul li ul li {
    margin:0 1px 0 0;
     display:block;
    float:none;
}
#menu ul li ul li a{
    display:block;

}
于 2013-06-12T12:37:15.557 回答