CSS横向菜单和纵向菜单两套

纵向菜单：

CSS页面：

@charset "utf-8
html,body,h1,h2,h3,h4,h5,h6,p,ul,ol,dl,form,th,td{margin:0;padding:0;font-weight:normal;}
body{font:12px/2 Verdana, Arial, Helvetica, Simsun, "Microsoft YaHei";text-align:center;}
ul{list-style:none;}
.copyright{margin-top:50px;font-size:13px;}
#dymenu{500px;margin:0 auto;text-align:left;}
#dymenu .root{zoom:1;background:#000;}
#dymenu .root:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
#dymenu .root li{position:relative;float:left;}
#dymenu .root a{color:#FFF;cursor:pointer;text-decoration:none;}
#dymenu .root table{border-collapse:collapse;border-spacing:0;}
#dymenu .root h3{height:25px;margin:0;padding:0 10px;background:#000;color:#FFF;font-size:12px;cursor:default;line-height:25px;}
#dymenu .root ul{display:none;}
#dymenu .root a:hover,#dymenu .root a:hover h3,#dymenu .root li:hover h3{background:#EEE;color:#000;}
#dymenu .root a:hover ul,#dymenu .root li:hover ul{display:block;position:absolute;left:0;100px;background:#EEE;}
#dymenu .root ul li{position:relative;float:none;border-top:1px solid #FFF;}
#dymenu .root ul a{display:block;100%;text-indent:10px;background:#EEE;color:#000;vertical-align:middle;}
#dymenu .root ul a:hover{background:#DDD;color:#333;}
#dymenu .root ul li h4{100px;background-color:#EEE;text-indent:10px;font-size:12px;}
#dymenu .root a:hover a ul,#dymenu .root li:hover li ul{display:none;position:static;background:none;}
#dymenu .root a:hover a:hover h4,#dymenu .root li:hover li:hover h4{background:#DDD;color:#333;cursor:pointer;}
#dymenu .root a:hover a:hover ul,#dymenu .root li:hover li:hover ul{display:block;position:absolute;left:100px;top:0;margin-top:-1px;_margin-top:0;background:#EEE;}
#dymenu .root ul ul li{border-left:1px solid #FFF;}

页面代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn" lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-cn" />
<title>纯CSS打造纵向下拉菜单 - Powered by 飘零雾雨</title>
<meta name="description" content="这是一个纯css打造的纵向下拉菜单" />
<meta name="keywords" content="纯css, 下拉菜单" />
<meta name="author" content="Doyoe(飘零雾雨), dooyoe@gmail.com" />
<link rel="stylesheet" type="text/css" media="all" href="skin/style2.css" />
</head>
<body>
<div id="dymenu">
<ul class="root">
<li>
	<!--[if IE]><a href="?"><table><tr><td><![endif]-->

	<h3>飘雨社区</h3>
	<ul>
		<li><a href="http://www.doyoe.com/">网站重构</a></li>
		<li>
			<!--[if IE]><a href="?"><table><tr><td><![endif]-->
			<h4>语义化 »</h4>
			<ul>

				<li><a href="?">三级菜单</a></li>
				<li><a href="?">三级菜单</a></li>
				<li><a href="?">三级菜单</a></li>
				<li><a href="?">三级菜单</a></li>
			</ul>
			<!--[if IE]></td></tr></table></a><![endif]-->
		</li>

		<li><a href="http://www.doyoe.com/">搜索引擎优化</a></li>
		<li><a href="http://www.doyoe.com/">用户体验</a></li>
	</ul>
	<!--[if IE]></td></tr></table></a><![endif]-->
</li>
<li>
	<!--[if IE]><a href="?"><table><tr><td><![endif]-->
	<h3>css探索之旅</h3>

	<ul>
		<li><a href="http://blog.doyoe.com/">CSS</a></li>
		<li><a href="http://blog.doyoe.com/">XHTML</a></li>
		<li><a href="http://blog.doyoe.com/">JavaScript</a></li>
		<li><a href="http://blog.doyoe.com/">SEO</a></li>
		<li><a href="http://blog.doyoe.com/">UE</a></li>

	</ul>
	<!--[if IE]></td></tr></table></a><![endif]-->
</li>
<li>
	<!--[if IE]><a href="?"><table><tr><td><![endif]-->
	<h3>一级菜单</h3>
	<ul>
		<li>
			<!--[if IE]><a href="?"><table><tr><td><![endif]-->

			<h4>二级菜单 »</h4>
			<ul>
				<li><a href="?">三级菜单</a></li>
				<li><a href="?">三级菜单</a></li>
				<li><a href="?">三级菜单</a></li>
				<li><a href="?">三级菜单</a></li>

			</ul>
			<!--[if IE]></td></tr></table></a><![endif]-->
		</li>
		<li><a href="?">二级菜单</a></li>
		<li><a href="?">二级菜单</a></li>
	</ul>
	<!--[if IE]></td></tr></table></a><![endif]-->
</li>

<li>
	<!--[if IE]><a href="?"><table><tr><td><![endif]-->
	<h3>一级菜单</h3>
	<ul>
		<li><a href="?">二级菜单</a></li>
		<li><a href="?">二级菜单</a></li>
		<li><a href="?">二级菜单</a></li>

		<li><a href="?">二级菜单</a></li>
	</ul>
	<!--[if IE]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>
<p class="copyright">&copy; Copyright <a href="http://blog.doyoe.com/" title="css探索之旅 - 飘零雾雨的庄园">doyoe.com</a></p>

<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>

<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-3500471-2");
pageTracker._trackPageview();
} catch(err) {}</script>
</body>
</html>

横向菜单：

CSS代码：

@charset "utf-8";
html,body,h1,h2,h3,h4,h5,h6,p,ul,ol,dl,form,th,td{margin:0;padding:0;}
body{font:12px/2 Verdana, Arial, Helvetica, Simsun, "Microsoft YaHei";text-align:center;}
.copyright{margin-top:50px;font-size:13px;}
#dymenu{500px;height:50px;margin:0 auto;background:#EEE;text-align:left;}
#dymenu ul{zoom:1;position:relative;list-style:none;background:#000;}
#dymenu ul:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
#dymenu li{float:left;}
#dymenu a{color:#FFF;cursor:default;text-decoration:none;}
#dymenu table{border-collapse:collapse;border-spacing:0;}
#dymenu h3{height:25px;padding:0 10px;font-size:12px;color:#FFF;font-weight:normal;cursor:default;line-height:25px;}
#dymenu div{display:none;}
#dymenu a:hover,#dymenu a:hover h3,#dymenu li:hover h3{background:#EEE;color:#000;}
#dymenu a:hover div,#dymenu li:hover div{display:block;position:absolute;left:0;500px;height:25px;background:#EEE;}
#dymenu div a{display:inline;margin:0 5px;color:#000;cursor:pointer;}
#dymenu div a:hover{background:#EEE;color:#333;}

页面代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn" lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-cn" />
<title>纯CSS打造横向下拉菜单 - Powered by 飘零雾雨</title>
<meta name="description" content="这是一个纯css打造的横向下拉菜单" />
<meta name="keywords" content="纯css, 下拉菜单" />
<meta name="author" content="Doyoe(飘零雾雨), dooyoe@gmail.com" />
<link rel="stylesheet" type="text/css" media="all" href="skin/style.css" />
</head>
<body>
<div id="dymenu">
<ul>
<li>
<!--[if IE]>
<a href="?"><table><tr><td>
<![endif]-->

    <h3>飘雨社区</h3>
	<div>
		<a href="http://www.doyoe.com/">网站重构</a>
		<a href="http://www.doyoe.com/">语义化</a>
		<a href="http://www.doyoe.com/">搜索引擎优化</a>
		<a href="http://www.doyoe.com/">用户体验</a>

	</div>
<!--[if IE]>
</td></tr></table></a>
<![endif]-->
</li>
<li>
<!--[if IE]>
<a href="?"><table><tr><td>
<![endif]-->
    <h3>css探索之旅</h3>
	<div>
		<a href="http://blog.doyoe.com/">CSS</a>
		<a href="http://blog.doyoe.com/">XHTML</a>

		<a href="http://blog.doyoe.com/">JavaScript</a>
		<a href="http://blog.doyoe.com/">SEO</a>
		<a href="http://blog.doyoe.com/">UE</a>
	</div>
<!--[if IE]>
</td></tr></table></a>
<![endif]-->
</li>
<li>
<!--[if IE]>
<a href="?"><table><tr><td>
<![endif]-->
    <h3>预留菜单</h3>

	<div>
		<a href="?">预留链接</a>
		<a href="?">虚位以待</a>
		<a href="?">虚位以待</a>
		<a href="?">虚位以待</a>
		<a href="?">虚位以待</a>

	</div>
<!--[if IE]>
</td></tr></table></a>
<![endif]-->
</li>
<li>
<!--[if IE]>
<a href="?"><table><tr><td>
<![endif]-->
    <h3>预留菜单</h3>
	<div>
		<a href="?">还是预留</a>
		<a href="?">还是虚位</a>

		<a href="?">还是虚位</a>
		<a href="?">还是虚位</a>
		<a href="?">还是虚位</a>
	</div>
<!--[if IE]>
</td></tr></table></a>
<![endif]-->
</li>
</ul>
</div>
<p class="copyright">&copy; Copyright <a href="http://blog.doyoe.com/" title="css探索之旅 - 飘零雾雨的庄园">doyoe.com</a></p>

<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-3500471-2");
pageTracker._trackPageview();
} catch(err) {}</script>
</body>
</html>

本人博客的文章大部分来自网络转载，因为时间的关系，没有写明转载出处和作者。所以在些郑重的说明：文章只限交流，版权归作者。谢谢

相关阅读:
Show, Attend and Tell: Neural Image Caption Generation with Visual Attention
（转）Awesome GAN for Medical Imaging
（转）Awesome Object Detection
（转）Awesome PyTorch List
深度学习课程笔记（十七）Meta-learning (Model Agnostic Meta Learning)
深度学习课程笔记（十六）Recursive Neural Network
（转）Multi-Object-Tracking-Paper-List
深度学习课程笔记（十五）Recurrent Neural Network
（转）Awsome Domain-Adaptation
论文阅读：Learning Visual Question Answering by Bootstrapping Hard Attention
原文地址：https://www.cnblogs.com/wzg0319/p/1688071.html