CSS 悬停导航/大理石菜单答案

【问题标题】：CSS hover navigation / marble menuCSS 悬停导航/大理石菜单
【发布时间】：2012-10-07 01:38:46
【问题描述】：

我有一个垂直导航栏，当鼠标悬停在哪里时，我希望选项水平显示在该按钮旁边。

我有 HTML，只是不确定如何使用 CSS 实现悬停效果。实现这一目标的最佳方法是什么？

HTML

<nav>
        <ul>
            <li><a href="index.php?page_id=7"><img src="<?php bloginfo('url'); ?>"><img src="<?php echo get_template_directory_uri(); ?>/img/about.png" alt="about ZOPA" /></a></li>
                <ul class="subs">
                    <li><a href="#">Realty</a></li>
                    <li><a href="#">RA</a></li>
                    <li><a href="#">WM + SB</a></li>
                    <li><a href="#">Vendors</a></li>
                </ul><!-- end subs -->
            <li><a href="index.php?page_id=16"><img src="<?php bloginfo('url'); ?>"><img src="<?php echo get_template_directory_uri(); ?>/img/blog.png" alt="ZOPA blog" /></a></li>
            <li><a href="index.php?page_id=13"><img src="<?php bloginfo('url'); ?>"><img src="<?php echo get_template_directory_uri(); ?>/img/share.png" alt="share with ZOPA" /></a></li>
            <li><a href="index.php?page_id=9"><img src="<?php bloginfo('url'); ?>"><img src="<?php echo get_template_directory_uri(); ?>/img/contact.png" alt="contact ZOPA" /></a></li>
            <li><a href="http://www.thezopateam.com/"><img src="<?php bloginfo('url'); ?>"><img src="<?php echo get_template_directory_uri(); ?>/img/properties.png" alt="ZOPA properties" /></a></li>
                <ul class="subs">
                    <li><a href="#">Buying</a></li>
                    <li><a href="#">Selling</a></li>
                </ul><!-- end subs -->
            <li><a href="index.php?page_id=11"><img src="<?php bloginfo('url'); ?>"><img src="<?php echo get_template_directory_uri(); ?>/img/gallery.png" alt="ZOPA gallery" /></a></li>
        </ul>
    </nav>

更新的CSS

nav li {
    width: 100px;
    margin: 1px;
    list-style-type: none;
}

nav > ul > li {
    position: relative; 
}

nav li ul {
    position: absolute;
    top: 0;
    left: 120px;
}

nav li ul li { 
    display: inline; 
}

nav li:not(:hover) ul { 
    display: none; 
}

【问题讨论】：

在该标记中，哪些元素是要悬停的按钮，哪些元素是出现的选项？你说的是子菜单吗？
不是 100% 确定你要做什么，但悬停 css 很简单。示例 - a:hover { /* CSS Here*/ }
对不起，我应该更清楚。第一组<li>s 是主按钮，.sub 是我希望在悬停时出现的。

标签： html css navigation hover

【解决方案1】：

这是一个子菜单的简单演示：http://jsbin.com/iyijed/1/edit

关键规则是nav li:not(:hover) ul { display: none; } - 这就是隐藏子菜单的原因，直到它们的父级悬停。

如果您对:not 有（旧浏览器）问题，您只需将display: none 放在子菜单上，然后用nav li:hover ul { display: block; } 覆盖它。

【讨论】：

感谢您的演示。我已经根据我在演示中看到的进行了更改，但是悬停效果仍然不起作用。你能看一下网站吗？ zoparealty.com/share
没关系，我发现了我的问题 - 在我想要悬停菜单的项目上留下了 </li>s。
好的，您的标记有点不同，因为子菜单不是其相应菜单项的子菜单。你仍然可以有点得到what you want，但是子菜单不能相对于他们的“父母”定位，因为他们的父母实际上不是他们的父母。同样在语义上，它并没有真正的意义。因此，我建议您更改标记以使子菜单 uls 成为 li 菜单项的子菜单。
如何让uls 像连续列表一样水平展开？像悬停我 > 叶，叶，叶
您可以使用nav li ul li { display: inline; }，并且您必须在nav li ul 上设置一个足以容纳整个水平列表的宽度。此外，如果您仍在使用 right 上的值定位子菜单，则需要将其切换为 left。

【解决方案2】：

这样的事情应该会让你接近：

nav > ul > li {
    position: relative;
}

nav > ul > li > ul.subs { 
    display:none;
    position:absolute;
    right: 5%;
}

nav > ul > li:hover > ul.subs {
    display:block;
}

【讨论】：