使用CSS+XHTML制作的下拉菜单(代码)


下面为你献上使用CSS+XHTML制作的下拉菜单的代码

样式部分:


* {
    margin:0;
    padding:0;
}
body {
    font:12px Verdana, Geneva, sans-serif #444;
    line-height:1.5;
}
ul li {
    list-style:none;
}
.menu {
    width:660px;
    margin:20px auto;
}
.menu li {
    display:inline;
    float:left;
    margin:0 5px;
    background:#f2f2f2;
    border:1px #39c solid;
    text-align:center;
    font-size:14px;
    font-weight:700;
    line-height:30px;
    cursor:hand;   
}
.tuckUp {
    display:inline;
    width:120px;
    height:30px;
    overflow:hidden;
    background:#f2f2f2;
}
.pullDown{
    display:inline;
    height:auto;
}
.item a:link, .item a:visited {
    display:inline;
    float:left;
    width:110px;
    background:#ccc;
    text-align:center;
    color:#444;
    font-size:12px;
    font-weight:normal;
    text-decoration:none;
    line-height:25px;
    margin:0 5px 5px 5px;
}
.item a:hover {
    display:inline;
    float:left;
    background:#39c;
    width:100px;
    color:#FFF;
    text-decoration:none;
    text-align:center;
    font-size:12px;
    font-weight:700;
    font-weight:normal;
    line-height:25px;
    padding:0 0 0 10px;
    margin:0 5px 5px 5px;
}
下面是HTML代码部分:
 

<ul class="menu">
  <li class="tuckUp" onmousemove="this.className='pullDown'" onmouseout="this.className='tuckUp'">MenuOne
    <div class="item"><a href="/">ITEM01</a></a><br />
      <a href="/">ITEM02</a></a><br />
      <a href="/">ITEM03</a><br />
      <a href="/">ITEM04</a><br />
      <a href="/">ITEM05</a><br />
      <a href="/">ITEM06</a><br /></div>
  </li>
  <li class="tuckUp" onmouseover="this.className='pUllDown'" onmouseout="this.className='tuckUp'">MenuTwo
    <div class="item"><a href="/">ITEM01</a><br />
      <a href="/">ITEM02</a><br />
      <a href="/">ITEM03</a><br />
      <a href="/">ITEM04</a><br /></div>
  </li>
  <li class="tuckUp" onmouseover="this.className='pullDown'" onmouseout="this.className='tuckUp'">MenuThree
    <div class="item" ><a href="/">ITEM01</a><br />
      <a href="/">ITEM02</a><br />
      <a href="/">ITEM03</a><br />
      <a href="/">ITEM04</a><br />
      <a href="/">ITEM05</a><br /></div>
  </li>
  <li class="tuckUp" onmouseover="this.className='pUllDown'" onmouseout="this.className='tuckUp'">MenuFour
    <div class="item"><a href="/">ITEM01</a><br />
      <a href="/">ITEM04</a><br />
      <a href="/">ITEM05</a><br /></div>
  </li>
  <li class="tuckUp" onmouseover="this.className='pUllDown'" onmouseout="this.className='tuckUp'">MenuFive
    <div class="item"><a href="/">ITEM01</a><br />
      <a href="/">ITEM02</a><br />
      <a href="/">ITEM03</a><br />
      <a href="/">ITEM04</a><br />
      <a href="/">ITEM05</a><br /></div>
  </li>
</ul>



相关阅读:
jQuery 位置插件
ASP语法注释
HTML5能否取代Flash
jQuery ui 1.7更新小结
写个设置命令的VBS脚本代码
ASP UTF-8编码下字符串截取和获取长度函数
PHP5.0正式发布 不完全兼容PHP4 新增多项功能
ASP并非真的无用
在SQL触发器或存储过程中获取在程序登录的用户
Visual Studio 2010- IntelliTrace(智能跟踪)[优化c盘]
使用Javascript的数学函数
动态样式类封装JS代码
CSS实战:美化段落文本之首字下沉
在asp中通过vbs类实现rsa加密与解密的代码
快速导航

Copyright © 2016 phpStudy | 皖ICP备18014864号-4