Question

[编辑]最初我以为他是用javascript做的，事实证明，他选择了一种只有CSS的方法。

所以我偶然发现了这个博客： david walsh's blog about jquery css etc 我真的很喜欢横向菜单。我想建立类似的东西。我很想看看他是怎么做到的。

找出那里发生了什么的好方法是什么？

Answer 1

这似乎是所有CSS。在chrome中，如果检查其中一个菜单项上的元素，您将看到基本结构：

<nav>
    <ul>
        <li class=>
            <a>Link</a><!-- this is the main menu item -->
            <div>  <!-- this is the submenu -->
                <ul>
                    <li></li> <!-- submenu item -->
            </div>
        </li>
    </ul>
</nav>

现在，了解所有这些，您可以单击按钮激活悬停在各种元素上，这样您就知道哪个是新样式。

当我在导航栏上激活悬停＆gt; ul＆gt;这个子菜单变得可见。

nav>ul>li:hover .dropdown {
    display: block;
    opacity: 1;
}

在导航＆gt; ul＆gt; li＆gt; a上激活悬停时，会弹出小图片。

nav>ul>li.connect>a:hover,
nav>ul>li.connect>a:active,
nav>ul>li.connect>a:focus {
    background-position: -324px 46px;
}

Answer 2

那个标题对我来说看起来像纯CSS，但总的来说，如果你使用的是Firebug，我很确定你可以通过查看脚本的/ events / seq / 1部分来确定事件的断点面板。

如何弄清楚这个漂亮的CSS水平菜单发生了什么？

2 个答案: