0

我看到了两种不同的方式来引用无序列表 ( <ul>)、列表项 ( <li>) 和锚点 ( <a>)。

我想在一个下拉列表中设置这些项目的属性，其中至少有两级嵌套<ul>。

我的问题具体是关于如何引用不同级别的<ul>,<li>和<a>其中的。

我已经命名了导航栏id="navBar"。

我在 youtube 上看到过：构建下拉导航栏

使用的语法是：

ul#navBar .sub1 li
ul#navBar .sub1 li a

其中“ .sub1 ”类已定义，是嵌套 <ul>的第一级，“ . sub2 ”是嵌套的第二级<ul>。

参考这些级别，使用的代码是。

ul#navBar .sub2 a {
                  background-color: blue;}

ul#navBar li:hover > a {
            background-color: #CFC;
            }

在我看来，去定义.sub1和.sub2的麻烦是多余的，我一直在使用以下格式：

#navBar ul li{ background-color: blue;}

#navBar ul li:hover ul{ background-color: red;}

真正的问题：

什么是正确的语法，使用我的（上面的代码）格式样式。要引用第二层嵌套<ul>并影响the <li>or the <a>there in？

我以为是这样的：

 #navBar ul li ul li: hover ul{ background-color: red;}

但我错了:(

4

2 回答 2

0

First note that there should never be a space before :hover.

So the basic HTML structure you're outlining is:

<ul id="navbar">
    <li>
        <ul class="sub1">
            <li>
                <ul class="sub2">
                    <li><a>Text</a><li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

To refer to the li and a within .sub2, you'd write:

#navbar ul ul li { style to apply to li }
#navbar ul ul li a { style to apply to a }
#navbar ul ul li:hover { style to apply to li on hover }
#navbar ul ul li:hover a { style to apply to a on li hover }

The reason the tutorial assigned classes is because using generic nested element is a really inefficient way of using CSS selectors; it's faster to use classes. For more info, see this article from CSS-Tricks.

于 2013-03-28T05:30:38.217 回答
0 
#navnar ul 
{/*some style*/} Folder
#navbar ul ul
{/*some style*/} sub-folder

#navbar ul li:hover
{/*some style*/}
#navbar ul ul li:hover
{/*some style*/}

我想这就是你所追求的。

查看本教程以获取更多信息- css3-animated-dropdown-menu

于 2013-03-26T17:26:12.050 回答