有什么問題請到評論中發表<br>

<!-- http://www.mb5u.com/jscode -->

<!-- bbs http://www.mb5u.com/bbs-->



<!-- 把下列代碼加入到head區內 -->

<style type="text/css">



#cssdropdown, #cssdropdown ul {

padding: 0;

margin: 0;

list-style: none;

}



#cssdropdown li {

float: left;

position: relative;

}



.mainitems{

border: 1px solid black;

background-color: #FFEEC6;

}



.mainitems a{

margin-left: 6px;

margin-right: 8px;

text-decoration: none;

}



.subuls{

display: none;

width: 10em;

position: absolute;

top: 1.2em;

left: 0;

background-color: lightyellow;

border: 1px solid black;

}



.subuls li{

width: 100%;

}



.subuls li a{

text-decoration: underline;

}



#cssdropdown li>ul { /* to override top and left in browsers other than IE, which will position to the top right of the containing li, rather than bottom left */

top: auto;

left: auto;

}



#cssdropdown li:hover ul, li.over ul { /* lists nested under hovered list items */

display: block;

}



#restofcontent { /*wrap rest of content of the page inside this div*/

clear: left;

}



</style>



<script type="text/javascript"><!--//--><![CDATA[//><!--

startList = function() {

if (document.all&&document.getElementById) {

cssdropdownRoot = document.getElementById("cssdropdown");

for (i=0; i<cssdropdownRoot.childNodes.length; i++) {

node = cssdropdownRoot.childNodes[i];

if (node.nodeName=="LI") {

node.οnmοuseοver=function() {

this.className+=" over";

}

node.οnmοuseοut=function() {

this.className=this.className.replace(" over", "");

}

}

}

}

}



if (window.attachEvent)

window.attachEvent("onload", startList)

else

window.οnlοad=startList;



//--><!]]></script>





<!-- 把下列代碼加入到body區內 -->

<ul id="cssdropdown">



<li class="mainitems">

<a href="http://www.mb5u.com">CSS Gallery</a>

<ul class="subuls">

<li><a href="">Gordon Mac</a></li>

<li><a href="">Juiced Thoughts</a></li>

<li><a href="">The Daily Flight</a></li>

<li><a href="">GrapeFruit</a></li>

</ul>

</li>



<li class="mainitems">

<a href="http://www.mb5u.com/">CSS Examples</a>

<ul class="subuls" style="width: 15em">

<li><a href="">CSS2 Generated Content</a></li>

<li><a href="">Custom scrollbar colors</a></li>

<li><a href="">Markerless and "no indent" Lists</a></li>

</ul>

</li>



</ul>

?

轉載于:https://www.cnblogs.com/zhijianliutang/archive/2011/11/16/2250768.html

總結

以上是生活随笔為你收集整理的导航栏中加入自动弹出下拉菜单的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。