CSS怎样实现下拉菜单？我们做前端开发时，常会遇到下拉菜单的需求，那么如果是用纯CSS要怎样来实现呢？下面给大家介绍一个用纯CSS实现的简易下拉菜单实例，对大家学习有一定的参考价值，感兴趣的朋友就继续往下看吧。

       实现效果

       实现代码

       html

<div id="container">
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">WordPress</a>
            <!-- First Tier Drop Down -->
            <ul>
                <li><a href="#">Themes</a></li>
                <li><a href="#">Plugins</a></li>
                <li><a href="#">Tutorials</a></li>
            </ul>        
            </li>
            <li><a href="#">Web Design</a>
            <!-- First Tier Drop Down -->
            <ul>
                <li><a href="#">Resources</a></li>
                <li><a href="#">Links</a></li>
                <li><a href="#">Tutorials</a>
            	<!-- Second Tier Drop Down -->
                <ul>
                    <li><a href="#">HTML/CSS</a></li>
                    <li><a href="#">jQuery</a></li>
                    <li><a href="#">Other</a>
                        <!-- Third Tier Drop Down -->
                        <ul>
                            <li><a href="#">Stuff</a></li>
                            <li><a href="#">Things</a></li>
                            <li><a href="#">Other Stuff</a></li>
                        </ul>
                    </li>
                </ul>
                </li>
            </ul>
            </li>
            <li><a href="#">Graphic Design</a></li>
            <li><a href="#">Inspiration</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">About</a></li>
        </ul>
    </nav>
  <h1>Pure CSS Drop Down Menu</h1>
<p> A simple dropdown navigation menu made with CSS Only. Dropdowns are marked with a plus sign ( + )</p>
</div>

css

/* CSS Document */

@import url(https://fonts.googleapis.com/css?family=Open+Sans);
@import url(https://fonts.googleapis.com/css?family=Bree+Serif);

body {
	background: #212121;
	font-size:22px;
	line-height: 32px;
	color: #ffffff;
	word-wrap:break-word !important;
	font-family: 'Open Sans', sans-serif;
	}

h1 {
	font-size: 60px;
	text-align: center;
	color: #FFF;
}	

h3 {
	font-size: 30px;
	text-align: center;
	color: #FFF;
}

h3 a {
	color: #FFF;
}

a {
	color: #FFF;
}

h1 {
	margin-top: 100px;
	text-align:center;
	font-size:60px;
	font-family: 'Bree Serif', 'serif';
	}

#container {
	margin: 0 auto;
}

p {
	text-align: center;
}

nav {
	margin: 50px 0;
	background-color: #E64A19;
}

nav ul {
	padding: 0;
  margin: 0;
	list-style: none;
	position: relative;
	}
	
nav ul li {
	display:inline-block;
	background-color: #E64A19;
	}

nav a {
	display:block;
	padding:0 10px;	
	color:#FFF;
	font-size:20px;
	line-height: 60px;
	text-decoration:none;
}

nav a:hover { 
	background-color: #000000; 
}

/* Hide Dropdowns by Default */
nav ul ul {
	display: none;
	position: absolute; 
	top: 60px; /* the height of the main nav */
}
	
/* Display Dropdowns on Hover */
nav ul li:hover > ul {
	display:inherit;
}
	
/* Fisrt Tier Dropdown */
nav ul ul li {
	width:170px;
	float:none;
	display:list-item;
	position: relative;
}

/* Second, Third and more Tiers	*/
nav ul ul ul li {
	position: relative;
	top:-60px; 
	left:170px;
}

	
/* Change this in order to change the Dropdown symbol */
li > a:after { content:  ' +'; }
li > a:only-child:after { content: ''; }

       以上就是关于如何用CSS实现简易下拉菜单的介绍，有需要的朋友可以参考参考上述代码，想要了解更多CSS菜单内容大家可以继续关注过

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• 在CSS中BFC的作用有哪些，如何创建使用

  这篇文章主要介绍了CSS 清除浮动、BFC的相关资料,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

• CSS mask-composite如何使用，能实现什么效果

  本篇文章给大家介绍一种基于 CSS mask-composite 的高级切图技巧，实现基于单张图片的任意颜色转换，希望对大家有所帮助！

• 用CSS制作虚线的边框滚动效果的方法是什么

  常常看到一种酷炫的效果，鼠标hover一片区域后，区域显示出虚线边框，并且还有线条动画，那么这种效果具体是怎么实现的呢，本文提供了几种思路，感兴趣的朋友跟随小编一起看看吧

• HTML5中汉字加拼音怎么实现，及如何做简单的进度条

  这篇文章主要介绍了html5给汉字加拼音加进度条的实现代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

• 用CSS实现文本过长自动隐藏的代码是什么

  这篇文章主要介绍了css 实现文字过长自动隐藏功能,需要的朋友可以参考下