css drop-down menu.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gbk" />
    <title>JavaScript The drop-down menu  </title>
    <style type="text/css">
        * {
            padding:0;
            margin:0;
        }
        body {
            font-family:verdana, sans-serif;
            font-size:small;
        }
        #navigation, #navigation li ul {
            list-style-type:none;
        }
        #navigation {
            margin:20px;
        }
        #navigation li {
            float:left;
            text-align:center;
            position:relative;
        }
        #navigation li a:link, #navigation li a:visited {
            display:block;
            text-decoration:none;
            color:#000;
            width:120px;
            height:40px;
            line-height:40px;
            border:1px solid #fff;
            border-width:1px 1px 0 0;
            background:#c5dbf2;
            padding-left:10px;
        }
        #navigation li a:hover {
            color:#fff;
            background:#2687eb;
        }
        #navigation li ul li a:hover {
            color:#fff;
            background:#6b839c;
        }
        #navigation li ul {
            display:none;
            position:absolute;
            top:40px;
            left:0;
            margin-top:1px;
            width:120px;
        }
        #navigation li ul li ul {
            display:none;
            position:absolute;
            top:0px;
            left:130px;
            margin-top:0;
            margin-left:1px;
            width:120px;
        }
    </style>
    <script type="text/javascript">
        function displaySubMenu(li)
	{
            var subMenu = li.getElementsByTagName("ul")[0];
            subMenu.style.display = "block";
        }
        function hideSubMenu(li)
	{
            var subMenu = li.getElementsByTagName("ul")[0];
            subMenu.style.display = "none";
        }
    </script>
</head>
<body>
    <ul>
        <li>
            <a href="#"> Column 1  </a>
            <ul>
                <li><a href="http://atf.99bill.com"> Column 1  -> Menu 1  </a></li>
                <li><a href="#"> Column 1  -> Menu 2  </a></li>
                <li><a href="#"> Column 1  -> Menu 3  </a></li>
                <li><a href="#"> Column 1  -> Menu 4  </a></li>
            </ul>
        </li>
        <li>
            <a href="#"> Column 2  </a>
            <ul>
                <li><a href="#"> Column 2  -> Menu 1  </a></li>
                <li><a href="#"> Column 2  -> Menu 2  </a></li>
                <li><a href="#"> Column 2  -> Menu 3  </a></li>
                <li><a href="#"> Column 2  -> Menu 4  </a></li>
                <li><a href="#"> Column 2  -> Menu 5  </a></li>
            </ul>
        </li>
        <li>
            <a href="#"> Column 3  </a>
            <ul>
                <li>
                    <a href="#"> Column 3  -> Menu 1  </a>
                    <ul>
                        <li><a href="http://www.google.com"> Menu 1  -> Submenu 1  </a></li>
                        <li><a href="#"> Menu 1  -> Sub menu 2  </a></li>
                        <li><a href="#"> Menu 1  -> Submenu 3  </a></li>
                        <li><a href="#"> Menu 1  -> Submenu 4  </a></li>
                    </ul>
                </li>
                <li><a href="#"> Column 3  -> Menu 2  </a></li>
                <li>
                    <a href="#"> Column 3  -> Menu 3  </a>
                    <ul>
                        <li><a href="#"> Menu 3  -> Submenu 1  </a></li>
                        <li><a href="#"> Menu 3  -> Sub menu 2  </a></li>
                        <li><a href="#"> Menu 3  -> Submenu 3  </a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</body>
</html>

分类:AJAX 时间:2009-08-24 人气:585
分享到:
blog comments powered by Disqus

相关文章

  • another to create a css horizontal drop-down menu _ fresh page code Station (www.webdm.cn) 2010-12-29

    <! 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 to bui

  • CSS + JS mask technology center, center technology, using JS to get the width of the div height? 2011-01-11

    <!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" xml:lang="zh-CN" lang="zh-CN"&g

  • 38 dynamic menu 38 jQuery And CSS Drop Down Multi Level Menu Solutions 2010-12-11

    See also: http://www.1stwebdesigner.com/freebies/38-jquery-and-css-drop-down-multi-level-menu-solutions/ 38 jQuery And CSS Drop Down Multi Level Menu Solutions Hello again, it's time for comprehensive programming article. Here you'll find 38 mainly j

  • XML document type definition in the DTD 2010-05-12

    DTD: Document Type Definition DTD can be considered as one or more of the XML file template, the XML file elements, element attributes, element of the arrangement / sequence of content elements can be included, must meet the definition in the DTD. DT

  • 适用的Google地图开发-简单版 2010-03-12

    最下面是效果图: key:AIzaSyBHJk6IaxZkZ5KUqiiOPkV3Pi3EXL04dWU(自己申请 https://code.google.com/apis/console 详细文档可找我私密.MSN: yummy@chinaclick.com.cn 任何 Google 地图 API 应用程序中的基础元素都是"地图"本身. 大量应用js,访问Google 的API. 在此之前较为麻烦的事申请Google 的key,相比都知道,Google 在中国市场的地位,因此Goog

  • Method of upper and lower center div css 2010-09-12

    <!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-

  • CSS is about half of the increase to achieve the same image link navigation 2010-10-14

    I do not know the title does not understand the effect that the effect is like this, such as QQ Space Friends log picture, the pop-up picture, the mouse on the image left and right sides, respectively, left and right arrows show, respectively, into t

  • Using style sheets, text boxes and buttons to become a kind of 2011-01-04

    Making a web page, the form of the object always gives people a sense of monotonous and boring, such as buttons, text boxes, etc., they invariably look like and the colors appear on your home page, the more or less damage Home of the aesthetic level,

  • 图解CSS的padding,margin,border属性(详细介绍及举例说明) 2013-05-11

    图解CSS的padding,margin,border属性 W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层.盒模型主要定义四个区域:内容(content).边框距(padding).边界(border)和边距(margin). 对于初学者,经常会搞不清楚margin,background-color,background-image,padding,content,border之间的层次.关系和相互影响

  • 图解CSS的padding,margin,border属性 2013-09-05

    图解CSS的padding,margin,border属性(详细介绍及举例说明) 图解CSS的padding,margin,border属性 W3C 组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层.盒模型主 要定义四个区域:内容(content).边框距(padding).边界(border)和边距(margin). 对于初学者,经常会搞不清楚margin,background-color,backgroun

iOS 开发

Android 开发

Python 开发

JAVA 开发

开发语言

PHP 开发

Ruby 开发

搜索

前端开发

数据库

开发工具

开放平台

Javascript 开发

.NET 开发

云计算

服务器

Copyright (C) codeweblog.com, All Rights Reserved.

CodeWeblog.com 版权所有 闽ICP备15018612号

processed in 0.039 (s). 13 q(s)