小編給大家分享一下HTML+CSS如何制作簡單下拉菜單,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
具體代碼如下:
HTML部分:
<divid="nav">
<ul>
<li>首頁</li>
<li>學習視頻
<ul>
<li>java</li>
<li>jQuery</li>
<li>C++</li>
<li>PHP</li>
<li>JavaScript</li>
</ul>
</li>
<li>個人中心</li>
<li>關于我們</li>
</ul>
</div>
CSS部分:
*{margin:0px;padding:0px;}
#nav{width:600px;height:40px;margin:0auto;}
#navul{list-style:none;}
#navulli{width:150px;float:left;line-height:40px;text-align:center;position:relative;}
#navullia{text-decoration:none;color:#000;display:block;text-align:center;}
#navullia:hover{color:#FFF;background:#333}
#navulliul{position:absolute;display:none;}
#navulliulli{float:none;line-height:30px;text-align:left;}
#navulliullia{width:100%;}
#navulliullia:hover{background-color:#06f;}
#navulli:hoverul{display:block}
以上是“HTML+CSS如何制作簡單下拉菜單”這篇文章的所有內容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內容對大家有所幫助,如果還想學習更多知識,歡迎關注億速云行業資訊頻道!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。