css选项卡做法（下拉菜单导航）

最新推荐文章于 2023-04-12 22:26:15 发布

luanmabug

最新推荐文章于 2023-04-12 22:26:15 发布

阅读量1.2k

点赞数

分类专栏： HTML5+CSS 文章标签： github css

本文链接：https://blog.csdn.net/yangyangdt/article/details/121652823

版权

这篇博客介绍了如何使用CSS创建带有下拉菜单的选项卡导航。内容包括设置HTML基础结构，通过display:inline-block使菜单项排列在一行，设置背景颜色和字体颜色，以及利用CSS的hover选择器和display属性实现鼠标悬停时下拉菜单的显示和隐藏。

摘要由CSDN通过智能技术生成

css选项卡

一.首先写出基本的html，包含ul li 和 ol li即可。

	<div class="main">
		<ul>
		<li><a href="">首页</a></li>
		<li>
			<a href="">2页</a>
			<ol>
					<li><a href="">中国香港</a></li>
					<li><a href="">韩国</a></li>
					<li><a href="">美国</a></li>
			</ol> 
		</li>
		<li>
			<a href="">3页</a>
			<ol>
					<li><a href="">香港300龙</a></li>
					<li><a href="">美国</a></li>
			</ol> 
		</li>
		<li>
			<a href="">4页</a>
			<ol>
					<li><a href="">香港400龙</a></li>
					<li><a href="">美国