CSS下拉菜單代碼介紹

大家知道CSS下拉菜單代碼嗎?下面我們就給大家詳細介紹一下吧!我們積累了一些經驗，在此拿出來與大家分享下，請大家互相指正。

<style type="text/css"><p>.menu {</p><p>font-family: verdana, sans-serif; </p><p>width:750px; </p><p>position:relative; </p><p>font-size:0.85em;</p><p>padding-bottom:250px;</p><p>}</p><p>.menu ul {</p><p>padding:0; </p><p>margin:0;</p><p>list-style-type: none;</p><p>}</p><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><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]-->

相信大家已經學會CSS下拉菜單代碼了吧!感謝大家對我們網站的支持!

相關推薦：

如何在Frontpage中定義網頁CSS樣式呢