純CSS標準型下拉菜單

2024-09-05 12:20:23

字體：大中小

來源：轉載

供稿：網友

符合標準、樣式標準的純CSS下拉菜單，鼠標放上就會看到效果了，通用性很強，適合大多數網站，希望大家喜歡。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>純CSS標準型下拉菜單</title></head><style></style><body><div   class="iwvjtn8m0"   id="nav">    <ul>    <li id="iwvjtn8m0"    class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'" style="height:18px;">網站首頁</li>    <li id="iwvjtn8m0"    class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">公司新聞    <div   id="iwvjtn8m0"   class="list">        我的日志<br />        我的日志<br />        我的收藏<br />    </div>    </li>    <li id="iwvjtn8m0"    class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">產品列表        <div   id="iwvjtn8m0"   class="list">        我的相冊<br />        我的收藏<br />    </div>    </li>    <li id="iwvjtn8m0"    class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">品牌故事        <div   id="iwvjtn8m0"   class="list">        我的日志<br />        我的相冊<br />        我的收藏<br />    </div>    </li>       <li id="iwvjtn8m0"    class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">關于我們        <div   id="iwvjtn8m0"   class="list">        我的日志<br />        我的相冊<br />        我的收藏<br />    </div>    </li>       <li id="iwvjtn8m0"    class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">美容顧問        <div   id="iwvjtn8m0"   class="list">        我的日志<br />        我的相冊<br />        我的收藏<br />    </div>    </li>       <li id="iwvjtn8m0"    class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">市場營銷        <div   id="iwvjtn8m0"   class="list">        我的收藏<br />        我的日志<br />        我的相冊<br />        我的收藏<br />    </div>    </li>       <li id="iwvjtn8m0"    class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">加盟我們        <div   id="iwvjtn8m0"   class="list">        我的首頁<br />        我的日志<br />        我的相冊<br />        我的收藏<br />    </div>    </li>       <li id="iwvjtn8m0"    class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">客服中心        <div   id="iwvjtn8m0"   class="list">        我的日志<br />        我的相冊<br />        我的收藏<br />    </div>    </li>    </ul></div></body></html>

上一篇：純CSS制作雙語導航條

下一篇：每一個菜單都能關閉的豎排導航