完全CSS下拉菜单，只用CSS，纯CSS构筑！

看看CSS代码，要 留神认真看，好好探究哦！

<style type="text/css"><p>.menu {</P><p>font-family: verdana, sans-serif; </P><div class="tj_content hidden-xs"><table width=600 border=0 cellspacing=0 cellpadding=2 align=center class=title14><tr align=center><td><a href="http://www.zhujiangroad.com/mobile/news/2020/6m81835.html" target=_blank > 华为一直在使用的“徕卡认证”，那么徕卡是一家什么公司呢？ </a></td><td><a href="http://www.zhujiangroad.com/news/html/2020/9m82037.html" target=_blank > 揭秘封杀华为、强抢TikTok的幕后黑手——美国CFIUS </a></td></tr> <tr align=center><td><a href="http://www.zhujiangroad.com/hardware/news/2023/3a17736.html" target=_blank > 水冷一定就比风冷强吗？高性价比装机应该怎么选 </a></td><td><a href="http://www.zhujiangroad.com/software/news/2023/4m87528.html" target=_blank > 电脑磁盘已满怎么清理？360安全卫士极速版给你答案 </a></td></tr></table></div><p>width:750px; </P><p>position:relative; </P><p>font-size:0.85em;</P><p>padding-bottom:250px;</P><p>}</P><div class="tj_content hidden-xs"><table width=600 border=0 cellspacing=0 cellpadding=2 align=center class=title14><tr align=center><td><a href="http://www.zhujiangroad.com/display/news/2022/3m84744.html" target=_blank > 打游戏？追剧？墨水屏我能拿他做什么 </a></td><td><a href="http://www.zhujiangroad.com/web/news/2019/12m81153.html" target=_blank > 霍金生前留下的“3大预言”：已实现一个，后两个还会远吗？ </a></td></tr> <tr align=center><td><a href="http://www.zhujiangroad.com/edu/soft/69380.html" target=_blank > 快人一步！Win7 开机速度提升的N种方法 </a></td><td><a href="http://www.zhujiangroad.com/software/news/2020/4m81550.html" target=_blank > APP偷听我们说话？这次，终于坐实了 </a></td></tr></table></div><p>.menu ul {</P><p>padding:0; </P><p>margin:0;</P><p>list-style-type: none;</P><p>}</P><div class="tj_content hidden-xs"><table width=600 border=0 cellspacing=0 cellpadding=2 align=center class=title14><tr align=center><td><a href="http://www.zhujiangroad.com/net/html/76456.html" target=_blank > 网站排名不稳定原因及解决办法 </a></td><td><a href="http://www.zhujiangroad.com/web/news/2023/10m88424.html" target=_blank > 一亿粉丝苦等李子柒 </a></td></tr> <tr align=center><td><a href="http://www.zhujiangroad.com/hardware/news/2021/7a17526.html" target=_blank > DIY从入门到放弃：机械盘固态盘能用多久？ </a></td><td><a href="http://www.zhujiangroad.com/software/news/2021/11m84250.html" target=_blank > 安装易卸载难 手机App里暗藏多少“牛皮癣”？ </a></td></tr></table></div><p>.menu ul li {</P><p>float:left;</P><p>position:relative;</P><p>}</P><p>.menu ul li a, .menu ul li a:visited {</P><p>display:block; </P><div class="tj_content hidden-xs"><table width=600 border=0 cellspacing=0 cellpadding=2 align=center class=title14><tr align=center><td><a href="http://www.zhujiangroad.com/game/news/2021/10m84021.html" target=_blank > 做手游错过最佳时机，一年收入17亿的英雄联盟，打不过王者荣耀？ </a></td><td><a href="http://www.zhujiangroad.com/mobile/news/2019/11a17422.html" target=_blank > 华为手机自带的投屏功能那么强大，如果你没用过，太浪费了 </a></td></tr> <tr align=center><td><a href="http://www.zhujiangroad.com/software/news/2021/10m83982.html" target=_blank > 网友曝美团App连续24小时定位 每5分钟请求一次 </a></td><td><a href="http://www.zhujiangroad.com/web/news/2021/8m83732.html" target=_blank > 外卖平台何时能为骑手缴纳社保？ </a></td></tr></table></div><p>text-decoration:none; </P><p>color:#000; </P><p>width:139px; </P><p>height:3em; </P><p>color:#000; </P><p>border:1px solid #fff; </P><p>border-width:1px 1px 0 0; </P><p>background:#dfc184; </P><p>padding-left:10px; </P><p>line-height:3em;</P><p>}</P><p>* html .menu ul li a, .menu ul li a:visited {</P><p>width:149px;</P><p>w\idth:139px;</P><p>}</P><p>.menu ul li ul {</P><p>display: none;</P><p>}</P><p>table {</P><p>margin:-1px; </P><p>border-collapse:collapse;</P><p>font-size:1em;</P><p>}</P><p>/* specific to non IE browsers */</P><p>.menu ul li:hover a {</P><p>color:#fff; </P><p>background:#bd8d5e;</P><p>}</P><p>.menu ul li:hover ul {</P><p>display:block; </P><p>position:absolute; </P><p>top:3em;</P><p>margin-top:1px;</P><p>left:0; </P><p>width:150px;</P><p>}</P><p>.menu ul li:hover ul li ul {</P><p>display: none;</P><p>}</P><p>.menu ul li:hover ul li a {</P><p>display:block; </P><p>background:#faeec7; </P><p>color:#000; </P><p>height:auto; </P><p>line-height:1.2em; </P><p>padding:5px 10px; </P><p>width:129px</P><p>}</P><p>.menu ul li:hover ul li a.drop {</P><p>background:#c9c9a7;</P><p>}</P><p>.menu ul li:hover ul li a:hover {</P><p>background:#c9c9a7; </P><p>color:#000;</P><p>}</P><p>.menu ul li:hover ul li:hover ul {</P><p>display:block; </P><p>position:absolute; </P><p>left:150px; </P><p>top:0;</P><p>width:150px;</P><p>}</P><p>.menu ul li:hover ul li:hover ul.left {</P><p>left:-150px;</P><p>}</P><p></style></P><p><!--[if lte IE 6]></P><p><style type="text/css"></P><p>.menu ul li a:hover {</P><p>color:#fff; </P><p>background:#bd8d5e;</P><p>}</P><p>.menu ul li a:hover ul {</P><p>display:block; </P><p>position:absolute; </P><p>top:3em; </P><p>left:0;</P><p>background:#fff;</P><p>margin-top:0;</P><p>marg\in-top:1px;</P><p>}</P><p>.menu ul li a:hover ul li a {</P><p>display:block; </P><p>background:#dbe4ab; </P><p>color:#000; </P><p>height:auto; </P><p>line-height:1.5em; </P><p>padding:5px 10px; </P><p>width:150px;</P><p>w\idth:129px;</P><p>}</P><p>.menu ul li a:hover ul li a.drop {</P><p>background:#c9c9a7;</P><p>}</P><p>.menu ul li a:hover ul li a ul {</P><p>visibility:hidden; </P><p>position:absolute; </P><p>height:0; </P><p>width:0;</P><p>}</P><p>.menu ul li a:hover ul li a:hover {</P><p>background:#c9c9a7; color:#000;</P><p>}</P><p>.menu ul li a:hover ul li a:hover ul {</P><p>visibility:visible; </P><p>position:absolute; </P><p>top:0; </P><p>color:#000;</P><p>left:150px;</P><p>}</P><p>.menu ul li a:hover ul li a:hover ul.left {</P><p>left:-150px;</P><p>}</P><p></style></P><![endif]-->

下面再看看XHTML代码，同样要认真 了解 。

<div class="menu"></P><p><ul></P><p><li><a class="drop" href="http://www.duote.com/">DEMOS</P><p><!--[if IE 7]><!--></P><p></a></P><p><!--<![endif]--></P><p><table><tr><td></P><p><ul></P><p><li><a href="http://www.duote.com/" title="The zero dollar ads page">zero dollars advertising page</a></li></P><p><li><a href="http://www.duote.com/" title="Wrapping text around images">wrapping text around images</a></li></P><p><li><a href="http://www.duote.com/" title="Styling forms">styled form</a></li></P><p><li><a href="http://www.duote.com/" title="Removing active/focus borders">active focus</a></li></P><p><li><a class="drop" href="http://www.duote.com/" title="Hover/click with no active/focus borders">hover/click with no borders</P><p><!--[if IE 7]><!--></P><p></a></P><p><!--<![endif]--></P><p><table><tr><td></P><p><ul></P><p><li><a href="http://www.duote.com/" title="Styling forms">styled form</a></li></P><p><li><a href="http://www.duote.com/" title="Removing active/focus borders">removing active/focus borders</a></li></P><p><li><a href="http://www.duote.com/" title="Hover/click with no active/focus borders">hover/click</a></li></P><p></ul></P><p></td></tr></table></P><p><!--[if lte IE 6]></P><p></a></P><p><![endif]--></P><p></li></P><p><li class="upone"><a href="http://www.duote.com/" title="Multi-position drop shadow">shadow boxing</a></li></P><p><li><a href="http://www.duote.com/" title="Image Map for detailed information">image map for detailed information</a></li></P><p><li><a href="http://www.duote.com/" title="fun with background images">fun with background images</a></li></P><p><li><a href="http://www.duote.com/" title="fade-out scrolling">fade scrolling</a></li></P><p><li><a href="http://www.duote.com/" title="em size images compared">em image sizes compared</a></li></P><p></ul></P><p></td></tr></table></P><p><!--[if lte IE 6]></P><p></a></P><p><![endif]--></P><p></li></P><p><li><a href="http://www.duote.com/">BOXES</P><p><!--[if IE 7]><!--></P><p></a></P><p><!--<![endif]--></P><p><table><tr><td></P><p><ul></P><p><li><a href="http://www.duote.com/" title="a coded list of spies">a coded list of spies</a></li></P><p><li><a href="http://www.duote.com/" title="a horizontal vertical menu">vertical menu</a></li></P><p><li><a href="http://www.duote.com/" title="an enlarging unordered list">enlarging unordered list</a></li></P><p><li><a href="http://www.duote.com/" title="an unordered list with link images">link images</a></li></P><p><li><a href="http://www.duote.com/" title="non-rectangular links">non-rectangular</a></li></P><p><li><a href="http://www.duote.com/" title="jigsaw links">jigsaw links</a></li></P><p><li><a href="http://www.duote.com/" title="circular links">circular links</a></li></P><p></ul></P><p></td></tr></table></P><p><!--[if lte IE 6]></P><p></a></P><p><![endif]--></P><p></li></P><p><li><a href="http://www.duote.com/">MOZILLA</P><p><!--[if IE 7]><!--></P><p></a></P><p><!--<![endif]--></P><p><table><tr><td></P><p><ul></P><p><li><a href="http://www.duote.com/" title="A drop down menu">drop down menu</a></li></P><p><li><a href="http://www.duote.com/" title="A cascading menu">cascading menu</a></li></P><p><li><a href="http://www.duote.com/" title="Using content:">content:</a></li></P><p><li><a href="http://www.duote.com/" title=":hover applied to a div">mozzie box</a></li></P><p><li><a href="http://www.duote.com/" title="I can build a rainbow">I can build a rainbow with transparent borders</a></li></P><p><li><a href="http://www.duote.com/" title="Snooker cue">a snooker cue using border art</a></li></P><p><li><a href="http://www.duote.com/" title="Target Practise">target practise</a></li></P><p><li><a href="http://www.duote.com/" title="Two tone headings">two tone headings</a></li></P><p><li><a href="http://www.duote.com/" title="Shadow text">shadow text</a></li></P><p></ul></P><p></td></tr></table></P><p><!--[if lte IE 6]></P><p></a></P><p><![endif]--></P><p></li></P><p><li><a href="http://www.duote.com/">EXPLORER</P><p><!--[if IE 7]><!--></P><p></a></P><p><!--<![endif]--></P><p><table><tr><td></P><p><ul></P><p><li><a href="http://www.duote.com/" title="Example one">the first example for Internet Explorer</a></li></P><p><li><a href="http://www.duote.com/" title="Weft fonts">weft fonts</a></li></P><p><li><a href="http://www.duote.com/" title="Vertical align">vertically aligning text</a></li></P><p></ul></P><p></td></tr></table></P><p><!--[if lte IE 6]></P><p></a></P><p><![endif]--></P><p></li></P><p><li><a href="http://www.duote.com/">OPACITY</P><p><!--[if IE 7]><!--></P><p></a></P><p><!--<![endif]--></P><p><table><tr><td></P><p><ul></P><p><li><a href="http://www.duote.com/" title="colour wheel">a colour wheel using opaque colours</a></li></P><p><li><a href="http://www.duote.com/" title="a menu using opacity">a menu using opacity</a></li></P><p><li><a href="http://www.duote.com/" title="partial opacity">partial opacity</a></li></P><p><li><a href="http://www.duote.com/" title="partial opacity II">partial opacity II</a></li></P><p><li><a class="drop" href="http://www.duote.com/" title="Hover/click with no active/focus borders">HOVER/CLICK</P><p><!--[if IE 7]><!--></P><p></a></P><p><!--<![endif]--></P><p><table><tr><td></P><p><ul class="left"></P><p><li><a href="http://www.duote.com/" title="Styling forms">styled form</a></li></P><p><li><a href="http://www.duote.com/" title="Removing active/focus borders">removing active/focus borders</a></li></P><p><li><a href="http://www.duote.com/" title="Hover/click with no active/focus borders">hover/click</a></li></P><p></ul></P><p></td></tr></table></P><p><!--[if lte IE 6]></P><p></a></P><p><![endif]--></P><p></li></P><p></ul></P><p></td></tr></table></P><p><!--[if lte IE 6]></P><p></a></P><p><![endif]--></P><p></li></P><p></ul></P></div>