html - css/html 中的子菜单

Question

我有一个子菜单，当我将鼠标悬停在它上面时，它会从导航菜单类型对象展开。现在，我的主导航菜单看起来像这样......

<div id= "navbar">
    <ul>
        <li><a href= "#" class= "navlink" id= "first"> First
              <div class= "firstsubmenu">
                    <ul>
                         <li> <a href= "#" class="firstsubmenulink"> First sub menu option </li>
                         <li> <a href= "#" class="firstsubmenulink"> Second sub menu option </li>
                         etc...
                    </ul>
              </div></a></li>
         <li><a href= "#" class= "navlink" id="second"> Second
             <div class= "secondsubmenu">
                <ul>
                    ..and so on 
    </ul>
</div>

现在，我的 CSS 看起来像

ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}

li
{
float:left;
}

.navlink:link
{
display:block;
width:120px;
text-align:center;
padding:10px;
text-decoration:none;
color:#FFFFFF;
}

.navlink:hover 
{
background-color:#ADD8E6;
color:#FFFFFF;
}
.navlink:visited 
{
background-color:#ADD8E6;
color:#FFFFFF;
}

在我尝试将子菜单中的每个元素设为可点击链接之前，一切都显示得非常好。即:第一个子菜单完美显示。它的CSS是

.firstsubmenu
{
display : none;
position : absolute;
left : 75px;
top : 32px ;
background-color : red; 
width : 930px;
height : 25px;
z-index : 10;
}

但是现在我添加了链接(使每个列表元素都在一个 block 中)，firstsubmenu 不再出现。每个链接的 css 看起来像这样

.firstsubmenulink
{
display:block;
width:120px;
text-align:center;
padding:10px;
text-decoration:none;
color:#FFFFFF;
}

但正如我所说，子菜单甚至不再出现。我意识到这篇文章有点长，但任何建议都会很好。

Answer 1

您可以使用以下 css 并创建基于纯 css 的菜单。

CSS:

body { padding: 3em; }
#navbar *  { padding:0; margin: 0; font: 1em arial; }
#navbar { position: absolute;  z-index: 99; margin: 0 auto; float: left; line-height: 20px; }

#navbar a { display: block; border: 1px solid #fff; background: #EFBE37; text-decoration: none; padding: 3px 10px; color:#666666; }
#navbar a:hover { background: #C6991D; }
#navbar ul li, #navbar ul li ul li  { width: 120px; list-style-type:none; }
#navbar ul li { float: left; width: 120px; }
#navbar ul li ul, #navbar:hover ul li ul, #navbar:hover ul li:hover ul li ul{ 
    display:none;
    list-style-type:none; 
    width: 120px;
    }

#navbar:hover ul, #navbar:hover ul li:hover ul, #navbar:hover ul li:hover ul li:hover ul { 
    display:block; 
    }
#navbar:hover ul li:hover ul li:hover ul { 
    position: absolute;
    margin-left: 120px;
    margin-top: -20px;
    }

结构:

<div id="navbar">
<ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Abous Us &nbsp; &nbsp; &#187;</a>
            <ul>
            <li><a href="#">About us 1</a></li>
            <li><a href="#">About us 2 &nbsp; &#187;</a>
                <ul>
                    <li><a href="#">XXX</a>
                    <li><a href="#">XXX</a>
                    <li><a href="#">XXX</a>
                </ul>
            </li>
        </ul>

    </li>
    <li><a href="#">Download</a></li>
    <li><a href="#">Menus &nbsp; &nbsp;  &#187;</a>
        <ul>
            <li><a href="#">Menus 1</a></li>
            <li><a href="#">Menus 2 &nbsp; &nbsp; &#187;</a>
                <ul>
                    <li><a href="#">Menus 2-1</a>
                    <li><a href="#">Menus 2-2</a>
                    <li><a href="#">Menus 2-3</a>
                </ul>
            </li>
        </ul>
    </li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">Feedback</a></li>

</ul>