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>

  • 相关阅读:
    没有技术驱动型公司 | 每个人都得加班 | 关注软技能
    各种15min(启动、横盘、破位)样例
    最新win10教育版激活密匙 win10各版本永久激活序列号
    大数定律具体是个什么概念?
    统计与概率——马同学高等数学
    三星MagicInfo Express软件制作介绍
    !!网上找的【英语单词词根记忆顺口溜】
    一个故事轻松记忆常见252个英语字根
    分享一个开源的音频分析软件
    C#连接XAMPP中的mysql 数据库(windows)
  • 原文地址:https://www.cnblogs.com/jihua/p/cssmenu.html
Copyright © 2011-2022 走看看