我有一个垂直导航栏,它有按钮,当悬停在哪里时,我希望选项水平显示在该按钮旁边。
我有 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;
}