Question

我有一个垂直导航栏，其中有一些按钮指向悬停的位置，我希望选项能够水平显示在该按钮旁边。

我有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; 
}

Answer 1

以下是子菜单的简单演示：http://jsbin.com/iyijed/1/edit

关键规则是nav li:not(:hover) ul { display: none; } - 这是隐藏你的子菜单直到父母徘徊的原因。

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

Answer 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;
}

CSS悬停导航/大理石菜单

2 个答案: