html - 如何使用 css 和 html 将垂直子菜单添加到水平菜单？

Question

我想在我的水平菜单中添加一个垂直子菜单。我有像聚光灯一样的菜单风格。我已经尝试了一切，但没有用。请帮我。

代码如下:

<div class="spotlightmenu">  
    <ul>
        <li><%: Html.ActionLink("Home", "Index", "Home")%>
            <ul>
                <li><%: Html.ActionLink("submenu1", "", "")%></li>
                <li><%: Html.ActionLink("submenu2", "", "")%></li>
                <li><%: Html.ActionLink("submenu3", "", "")%></li>
            </ul>
        </li>
        <%--   <li><%: Html.ActionLink("About", "About", "Home")%></li> --%>
        <li><%: Html.ActionLink("Profile", "", "")%></li>
        <li><%: Html.ActionLink("Register", "Index", "Register")%></li>
        <li><%: Html.ActionLink("About Us", "", "")%></li>
        <li><%: Html.ActionLink("Contact Us", "", "")%></li>
    </ul>
</div>

这是 css 文件:

.spotlightmenu {
    width: 100%;
    overflow:hidden;
}

.spotlightmenu ul {
    margin: 0;
    padding: 0;
    font: bold 14px Verdana; /* font style and size */
    list-style-type: none;
    text-align: left; /* "left", "center", or "right" align menu */
    /* background-color: #0033FF; */
    background-image: url('menu_style.jpg');
    border-radius:40px;  /* for making round corners of the menu */
    /* opacity:0.5; */ 
}

.spotlightmenu li {
    display: inline-block;
    position:relative;
    padding: 5px;
    margin: 0;
    margin-right: 5px; /* right margin between menu items */
}


.spotlightmenu li a {
    display:inline-block;
    padding: 5px;
    padding-top:10px;
    min-width:50px; /* horizontal diameter of spotlight */
    height:30px; /* vertical diameter of spotlight */
    text-decoration: none;
    color: white;
    margin: 0 auto;
    overflow:hidden;
    -moz-transition: all 0.5s ease-in-out; /* CSS3 transition to animate all A properties */
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.spotlightmenu li:hover a {
    color: white;
    background: #99CC66;            /* #669900; /* background color of spotlight */
    -webkit-border-radius: 50%; /* large radius to create circular borders */
    -moz-border-radius: 50%;
    border-radius: 50%;
}

.spotlightmenu li a span {
    position:relative;
    top:35%; /* move text down so it appears centered within menu item */
}

Answer 1

例如你可以这样做: HTML:

<ul id="navbar">
  <!-- The strange spacing herein prevents an IE6 whitespace bug. -->
   <div class="spotlightmenu">  
        <ul>
          <li>
            <a href="#">helloWorld</a>
          <ul>

          <li><a href="#">SubItem1<a></li>
          <li><a href="#">Subitem2<a></li>
          <li><a href="#">SubItem3<a></li>

          </ul>

          </li>

          <li><a href="#">Section2<a></li>
          <li><a href="#">Section3<a></li>
          <li><a href="#">Section4<a></li>
          <li><a href="#">Section5<a></li>
        </ul>
   </div>

CSS:

    .spotlightmenu ul li ul{
        display:none;
}
.spotlightmenu ul li:hover > ul{
        display:block;
        margin:0;
        padding:0;
        position:absolute;
        float:none;
}
.spotlightmenu > ul > li{
        margin:10px;
        background-color: silver;
        border-radius:10px;
        display:inline;
}

这是一个简单的例子，可以做你想做的事。您还可以查看以下链接:

http://sixrevisions.com/css/30-exceptional-css-navigation-techniques

我建议您研究一下 jquery 和 css3 导航栏，它们确实很酷。