zoukankan      html  css  js  c++  java
  • CSS实现弹出导航菜单

    查看实际效果:http://keleyi.com/a/bjac/vksd7321.htm

    完整代码,保存在html文件打开也可看到效果:

    <!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><base target="_blank" />
    <style>
    ul,li{ margin:0px; padding:0px; list-style:none;}
    .div_a{ 300px; float:left;}
    .div_a li{ 300px; height:50px; border-bottom:1px solid #fff; cursor:pointer; background-color:#060; text-align:center; line-height:50px; font-size:18px; color:#fff;}
    .div_a1-keleyi-com{ 300px; height:100px; position:relative; background-color:#F00; top:-50px; left:250px; z-index:999; display:none;}
    .div_a li:hover .div_a1-keleyi-com{ display:block;}.div_a a{ color:white;}
    </style>
    </head>
    <body>
    <div class="div_a">
    <ul>
    <li><a href="http://keleyi.com/menu/aspnet/">ASP.NET</a><div class="div_a1-keleyi-com"><a href="http://keleyi.com/a/bjac/kjsrt3b0.htm">基于微软.NET的编程平台</a></div></li>
    <li><a href="http://keleyi.com/a/bjac/ck9atu5j.htm">PHP</a><div class="div_a1-keleyi-com"><a href="http://keleyi.com/a/bjac/mnmpm4bv.htm">使用最多的WEB开发语言</a></div></li>
    <li><a href="http://keleyi.com/a/bjac/kjsrt3b0.htm">AJAX</a><div class="div_a1-keleyi-com"><a href="http://keleyi.com/a/bjac/182di68b.htm">实现网页交互式设计</a><br /><a href="http://keleyi.com/a/bjac/13639353acde40c.htm">左侧可弹出隐藏div</a></div></li>
    <li><a href="http://keleyi.com/menu/csharp/">C#.NET</a><div class="div_a1-keleyi-com"><a href="http://keleyi.com/menu/net/">新一代微软平台编程语言</a></div></li>
    <li><a href="http://keleyi.com/menu/javascript/">JAVA</a><div class="div_a1-keleyi-com"><a href="http://keleyi.com/a/bjac/9a9irmcm.htm">最有前途的编程语言</a></div></li>
    <li><a href="http://keleyi.com/a/bjac/ck9atu5j.htm">DELPHI</a><div class="div_a1-keleyi-com"><a href="http://keleyi.com/a/bjac/5939d3b2c920ff6d.htm">最具潜力的编程语言</a></div></li>
    </ul>
    </div><!--柯 乐 义-->
    </body>
    </html>

  • 相关阅读:
    给定中序和后序遍历,求前序序列(C++递归方式实现)
    myeclipse2014删除antlr-2.7.2.jar--解决struts和hibernate包冲突
    hadoop1.2.1配置与运行子串统计程序
    任务计划crontab
    建NTP
    vnc下运行runInstall报java错误
    rpm软件安装
    redis
    rpm包和deb包转换
    新老版本centos下载
  • 原文地址:https://www.cnblogs.com/jihua/p/cssmenu.html
Copyright © 2011-2022 走看看