纯CSS+XHTML打造简约下拉菜单

2024-09-05 12:20:27

字体：大中小

来源：转载

供稿：网友

简约下拉菜单，基于纯CSS+XHTML制作实现，一方面是想表现菜单，另一方面是想说明如何固定菜单下方的DIV，说起来还有点复杂，你最好看看代码吧，本人表达能力欠佳，怕越说越糊涂了，上边的二级菜单展开的时候，下边的Div不随菜单往下坠，因为以前很多朋友都遇到过菜单展开后影响到其它DIV的情况。

<!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><title>纯CSS+XHTML简约下拉菜单</title><style type="text/css"></style></head><body><ul class="menu">  <li class="tuckUp" onmousemove="this.className='pullDown'" onmouseout="this.className='tuckUp'">MenuOne    <div class="item">ITEM01<br />      ITEM02<br />      ITEM03<br /></div>  </li>  <li class="tuckUp" onmouseover="this.className='pUllDown'" onmouseout="this.className='tuckUp'">MenuTwo    <div class="item">ITEM01<br />      ITEM02<br /></div>  </li>  <li class="tuckUp" onmouseover="this.className='pullDown'" onmouseout="this.className='tuckUp'">MenuThree    <div class="item" >ITEM01<br />      ITEM02<br />      ITEM03<br /></div>  </li>  <li class="tuckUp" onmouseover="this.className='pUllDown'" onmouseout="this.className='tuckUp'">MenuFour    <div class="item">ITEM01<br />      ITEM04<br />      ITEM05<br /></div>  </li>  <li class="tuckUp" onmouseover="this.className='pUllDown'" onmouseout="this.className='tuckUp'">MenuFive    <div class="item">ITEM01<br />      ITEM02<br />      ITEM03<br /></div>  </li></ul><div class="contant"><h1>鼠标滑上菜单,它不再动弹...:)</h1></div></body></html>

上一篇：JS模拟的QQ面板上的多级可展开的菜单

下一篇：简约、兼容好的XHTML+css二级导航菜单