CSS悬停导航/大理石菜单 [英] CSS hover navigation / marble menu

问题描述

我有一个垂直导航栏，有悬停在上面的按钮，我想选择水平地显示在该按钮旁边。

我有HTML，我只是不知道如何使CSS发生悬停效果。

 < 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.pngalt =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 =＃>供应商< / 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.pngalt =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.pngalt =与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.pngalt =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.pngalt =ZOPA properties/>< / a>< / li> 
< ul class =subs> 
< li>< a href =＃>购买< / a>< / li& 
< li>< a href =＃>出售< / 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.pngalt =ZOPA gallery/>< / a>< / li& 
< / ul> 
< / nav> 
  

更新css

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

解决方案

子菜单： http://jsbin.com/iyijed/1/edit

关键规则是 nav li：not（：hover）ul {display：none;

如果你有（旧的浏览器）问题与 ：not ，你可以简单地在子菜单上放置 display：none ，并用显示：block; } 。

I have a vertical navigation bar that has buttons to where when hovered over, I would like for options to appear beside that button horizontally.

I have the HTML, I'm just not sure how to make the hover effects happen with CSS. What's the best method to achieve this?

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>

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

解决方案

Here's a simple demo of a submenu: http://jsbin.com/iyijed/1/edit

The key rule is nav li:not(:hover) ul { display: none; } - that's what hides your submenus until their parent is hovered.

If you have (old browser) issues with :not, you can simply put display: none on the submenus, and override it with nav li:hover ul { display: block; }.

这篇关于CSS悬停导航/大理石菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！