如何使用CSS在悬停时添加子菜单 [英] how to add sub menus on hover using CSS

问题描述

下面是我的HTML代码。如何使用css将子菜单添加到此代码中

below is my html code. how to add sub menu using css to this code

<div id="menu" class="container">
        <nav>
			<ul>
				<li class="current_page_item"><a href="#">Homepage</a></li>
				<li><a href="#">Manage internship</a>
             <ul>
				   <li><a href="#">Photoshop</a></li>
				   <li><a href="#">Illustrator</a></li>
				   <li><a href="#">Web Design</a></li>
			</ul>
                </li>
              

				<li><a href="#">Blog</a></li>
				<li><a href="#">Portfolio</a></li>
				<li><a href="#">Contact</a></li>
                <li><a href="#">Logout</a></li>
                <li><a href="../../Log_in.aspx">Login</a></li>

			</ul>
            </nav>
		</div>

推荐答案

感谢您对该问题的评论中的澄清。如果你只是想到它，你可以找到一个纯CSS解决方案。巧妙的技巧是伪类选择器 hover 与相邻兄弟选择器（'+'）的组合。假设，为简单起见，您需要在悬停时显示/隐藏一些 div 。这个想法在这个问题的最佳答案中解释： http：// stackoverflow。 com / questions / 5210033 / show-div-on-hover-with-only-css [ ^ ]。



现在，您需要显示/隐藏 div ，但是其他东西，比如说， ul 某个类的元素。比方说，你有类名menu和submenu，那么你需要将上面显示的想法与你的HTML和那个类结合起来。它可能类似于：

Thank you for your clarifications in the comments to the question. You could find a pure CSS solution if you just thought about it. The neat trick is the combination of the pseudo-class selector hover with the adjacent sibling selector ('+'). Suppose, for simplicity, you need to show/hide some div on hover. The idea is explained in the top answer to this question: http://stackoverflow.com/questions/5210033/show-div-on-hover-with-only-css[^].

Now, you need to show/hide not div, but something else, say, ul element of certain class. Let's say, you have the classes names "menu" and "submenu", then you need to combine the idea shown above with your HTML and that class. It could look something like:

ul.submenu {
    display: none;
}

il.menu:hover + ul.submenu {
    display: block;
}

再次，这只是同一个想法的发展，但这应该足够了你可以按照你想要的方式开发HTTP + CSS。



进一步阅读：

Suckerfish下载： http://alistapart.com/article/d ropdowns [ ^ ]，

相邻同级选择器： http://meyerweb.com/eric/articles/webrev/200007a.html [ ^ ]。

-SA

这篇关于如何使用CSS在悬停时添加子菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！