`

CSS下拉菜单

阅读更多
<!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下拉菜单</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 id="navigation">  
        <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">  
            <a href="#">栏目1</a>       
            <ul>  
                <li><a href="http://atf.99bill.com">栏目1->菜单1</a></li>  
                <li><a href="#">栏目1->菜单2</a></li>  
                <li><a href="#">栏目1->菜单3</a></li>  
                <li><a href="#">栏目1->菜单4</a></li>  
            </ul>  
        </li>  
        <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">  
            <a href="#">栏目2</a>       
            <ul>  
                <li><a href="#">栏目2->菜单1</a></li>  
                <li><a href="#">栏目2->菜单2</a></li>  
                <li><a href="#">栏目2->菜单3</a></li>  
                <li><a href="#">栏目2->菜单4</a></li>  
                <li><a href="#">栏目2->菜单5</a></li>  
            </ul>  
        </li>  
        <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">  
            <a href="#">栏目3</a>       
            <ul>  
                <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">  
                    <a href="#">栏目3->菜单1</a>  
                    <ul>  
                        <li><a href="http://www.google.com">菜单1->子菜单1</a></li>  
                        <li><a href="#">菜单1->子菜单2</a></li>  
                        <li><a href="#">菜单1->子菜单3</a></li>  
                        <li><a href="#">菜单1->子菜单4</a></li>  
                    </ul>  
                </li>  
                <li><a href="#">栏目3->菜单2</a></li>  
                <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">  
                    <a href="#">栏目3->菜单3</a>  
                    <ul>  
                        <li><a href="#">菜单3->子菜单1</a></li>  
                        <li><a href="#">菜单3->子菜单2</a></li>  
                        <li><a href="#">菜单3->子菜单3</a></li>  
                    </ul>  
                </li>  
            </ul>  
        </li>  
    </ul>  
</body>  
</html>  
分享到:
评论

相关推荐

    纯CSS下拉菜单,宽度自适应

    本主题聚焦于“纯CSS下拉菜单”,这是一种不依赖JavaScript实现的下拉菜单技术,主要利用CSS(层叠样式表)来创建动态效果。在实际应用中,这种菜单可能不是最通用的解决方案,但对那些希望深入了解CSS特性和动画...

    19个精彩的CSS下拉菜单打包下载

    在网页设计中,CSS下拉菜单是一个不可或缺的元素,它为用户提供了一种高效且直观的导航方式。这个压缩包包含了19个精心设计和实现的CSS下拉菜单,每个都有其独特的风格和交互效果,旨在提升用户体验并美化网站界面。...

    CSS下拉菜单.rar

    而CSS下拉菜单则是导航菜单中的一个高级应用,为用户提供更便捷的交互体验。本资源"CSS下拉菜单.rar"显然是关于如何使用CSS来创建动态、响应式的下拉菜单。 在创建CSS下拉菜单时,我们通常会结合HTML和CSS技术,...

    纯CSS下拉菜单代码,界面简洁,英文菜单.rar

    这份"纯CSS下拉菜单代码"提供了实现这一功能的简单而实用的方法,尤其适合那些希望避免JavaScript或者jQuery依赖的前端开发者。 纯CSS下拉菜单的实现原理主要基于CSS的选择器、定位以及过渡效果。以下是一些关键...

    纯CSS下拉菜单 非常实用

    纯CSS下拉菜单 不需要JS 效果不错! 从某外国网站上直接弄下来的!

    经典的蓝色CSS下拉菜单

    经典的蓝色CSS下拉菜单

    5款漂亮的纯CSS下拉菜单

    纯CSS下拉菜单主要利用CSS的盒模型、定位(positioning)、选择器(selectors)以及过渡(transitions)等特性。下面我们将逐一探讨这些关键知识点: 1. **盒模型**:CSS的盒模型是理解布局的基础,包括content、...

    DIV+CSS下拉菜单,适合参考学习

    本教程主要关注的是使用`DIV+CSS`创建下拉菜单,这是一种常见的交互式导航元素,对于网站用户体验至关重要。 下拉菜单的设计主要依赖于CSS的`position`属性、`display`属性以及一些过渡和动画效果。在IE6.0及以上...

    css下拉菜单收集,css下拉菜单收集

    本篇将深入探讨CSS下拉菜单的设计原理、实现方法以及常见技巧。 首先,理解基本的HTML结构是创建下拉菜单的基础。一个简单的下拉菜单通常由`&lt;ul&gt;`(无序列表)和`&lt;li&gt;`(列表项)元素构建,其中`&lt;li&gt;`元素内嵌套另...

    纯css下拉菜单兼容主流浏览器IE6+

    纯css下拉菜单兼容主流浏览器IE6+

    你值得拥有的CSS下拉菜单效果

    在网页设计中,CSS下拉菜单是一个常见的交互元素,它为用户提供了一种便捷的方式来访问页面的多层次导航。本文将深入探讨如何使用CSS实现各种下拉菜单效果,以及如何通过优化来提升用户体验。 首先,让我们来看一个...

    CSS实现下拉菜单代码

    以上就是一个基本的CSS下拉菜单实现。当然,实际项目中可能需要考虑更多细节,比如响应式布局、多级下拉菜单、鼠标离开时的延迟隐藏等。这需要通过更复杂的CSS选择器和JavaScript来实现。在提供的压缩包文件中,应该...

    纯css下拉菜单效果

    纯CSS下拉菜单效果的实现主要依赖于CSS的布局、选择器和过渡动画属性。通过巧妙地应用这些技术,我们可以创建出功能完备且具有良好用户体验的下拉菜单,无需JavaScript的介入。对于前端开发者来说,熟练掌握这些CSS...

    CSS下拉菜单设计专家 Visual Infinite Menus

    《CSS下拉菜单设计专家:Visual Infinite Menus深度解析》 在网页设计中,下拉菜单作为导航系统的重要组成部分,其美观性和功能性至关重要。Visual Infinite Menus是一款专注于CSS下拉菜单设计的专业工具,它以其...

    不错的css下拉菜单

    在网页设计中,CSS下拉菜单是一个非常常见且实用的功能,它使得网站的导航更加直观、易用。本文将深入探讨“不错的CSS下拉菜单”的实现原理、设计技巧以及优化方法。 一、基本原理 CSS(层叠样式表)是用于控制...

    好看的js+css下拉菜单

    总结一下,创建一个好看的js+css下拉菜单主要涉及以下几个步骤: 1. 设计HTML结构,包括主菜单和子菜单。 2. 使用CSS设置样式,包括隐藏和显示子菜单的逻辑,以及美化菜单的外观。 3. 添加JavaScript(这里使用...

    支持多种浏览器的纯CSS下拉菜单

    本文将详细探讨如何创建一个支持多种浏览器的纯CSS下拉菜单,以及这种技术的重要性和优势。 首先,理解“纯CSS”意味着我们不依赖JavaScript或者其他外部库来实现下拉菜单的功能,而是完全利用CSS(层叠样式表)来...

    如何做CSS下拉菜单

    ### 如何创建CSS下拉菜单:深入解析与实践 在网页设计中,下拉菜单是一种常见的导航元素,它不仅能够节省页面空间,还能提供清晰的导航结构,提升用户体验。本文将详细解读如何利用CSS实现一个功能完备且美观的下拉...

    css下拉菜单

    以下将详细介绍标题“css下拉菜单”所涵盖的5种不同样式的下拉菜单,并探讨它们的设计原理和实现方法。 1. **经典悬停展开式下拉菜单** 这是最基础的CSS下拉菜单样式,当鼠标悬停在父级菜单项上时,子菜单会立即...

    纯div+css下拉菜单支持ie6,ie7、火狐

    在实现div+css下拉菜单时,关键知识点包括: 1. **CSS盒模型**:理解CSS的边距、填充、边框以及内容区域如何影响元素尺寸,这对菜单的布局至关重要。 2. **定位(positioning)**:通常使用`relative`、`absolute`...

Global site tag (gtag.js) - Google Analytics