二级导航菜单（横向）

最新推荐文章于 2021-08-04 08:24:18 发布
最新推荐文章于 2021-08-04 08:24:18 发布
阅读量8.5k 收藏 88
点赞数 13 

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>制作二级导航菜单(横向)</title>
<style type="text/css">
        #menu{
            width: 720px;
            height: 20px;
            margin: 0px auto;
            border: 1px solid #999;
        }
        #menu ul{
            margin: 0px;
            padding: 0px;
            list-style: none;/* 隐藏默认列表符号*/
        }
        #menu ul li{
            background: #06C;
            height: 26px;
            line-height: 26px;  /*行距*/
            text-align: center;
            border-bottom: 1px solid #999;
            position: relative;
            width: 120px;
            float: left;
        }
        a{
            display: block;
            font-size: 13px;
            color: #FFF;
            text-decoration: none;/*隐藏超廉价默认下划线*/
        }
        a:hover{
            color:#F00;
            font-size: 14px;
        }
        #menu ul li ul{
            display: none;/*默认隐藏*/
            top:26px;
            width: 100px;
            border: 1px solid #ccc;
            border-bottom: none;
        }
        #menu ul li:hover ul{
            display: block;  /* 显示 */
        }
        #menu ul li:hover ul li a{
            display: block;
        }
    </style>
</head>
<body>
<div id="menu">
    <ul>
        <li><a href="#">前端</a>
            <ul>
                <li><a href="#">HTML5</a></li>
                <li><a href="#">CSS</a></li>
                <li><a href="#">Javascript</a></li>
                <li><a href="#">Ajax</a></li>
                <li><a href="#">jQuery</a></li>
            </ul>
        </li>
        <li><a href="#">后台</a>
            <ul>
                <li><a href="#">Java</a></li>
                <li><a href="#">C++</a></li>
                <li><a href="#">PHP</a></li>
                <li><a href="#">Python</a></li>
                <li><a href="#">C#</a></li>
            </ul>
        </li>
        <li><a href="#">移动应用</a>
            <ul>
                <li><a href="#">Android</a></li>
                <li><a href="#">IOS</a></li>
            </ul>
        </li>
        <li><a href="#">数据库</a>
            <ul>
                <li><a href="#">Oracle</a></li>
                <li><a href="#">MySql</a></li>
                <li><a href="#">SqlServer</a></li>
                <li><a href="#">MongoDB</a></li>
                <li><a href="#">DB2</a></li>
            </ul>
        </li>
        <li><a href="#">操作系统</a>
            <ul>
                <li><a href="#">Linux</a></li>
                <li><a href="#">Unix</a></li>
                <li><a href="#">Mac</a></li>
                <li><a href="#">Windows</a></li>
            </ul>
        </li>
        <li><a href="#">服务器</a>
            <ul>
                <li><a href="#">Tomcat</a></li>
                <li><a href="#">WebSphere</a></li>
                <li><a href="#">WebLogicc</a></li>
            </ul>
        </li>
    </ul>
</div>
</body>
</html>

 

foxm
关注
横向二级导航菜单(html+css+js)
LindenTao
05-16 1万+
/*基本信息*/ body { margin: 0; padding: 0; background: #FFFFFF; } /*导航*/ #navigation { font: 12px bolder "Lucida Grande" ,​Helvetica,​Arial,​Verdana,​sans-serif; /* 设置文字大小和字体样式 */ heig
html横向导航二级菜单代码,横向二级导航菜单
weixin_39734646的博客
06-07 1761
无标题文档var num=5;function getObj(objName){return(document.getElementById(objName));}function tag(id){getObj("searconrow2").innerHTML=getObj("produce"+id).innerHTML;for(var i=1;i<=num;i++){if(i==id) {...
很好看的二级横向导航菜单
05-15
很好的二级横向导航菜单，你开发过程中导航菜单的首选
横向二级导航菜单
09-26
js导航菜单制作一个蓝色横向二级导航菜单，鼠标滑过slide滑动动画效果显示二级导航菜单。内含js代码下载。兼容IE6-8,firefox等主流浏览器
横向导航二级菜单
猫沙盆
09-18 4476
改编鼠标指向显示二级菜单，可以横向居中显示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
蓝色横向二级导航菜单
05-01
"蓝色横向二级导航菜单"是一种常见的网页界面设计，尤其适用于那些具有多层级内容的网站。这种设计通常采用水平布局，使得菜单条目横向排列，既节省空间又易于阅读。 在“蓝色横向二级导航菜单”中，主要涉及以下...
jquery制作一个横向二级导航下拉菜单
06-05
通常，二级导航菜单由一个主导航条和嵌套的子菜单组成。我们可以创建一个`<ul>`作为一级菜单，其中的每个`<li>`包含一个链接和一个二级菜单的`<ul>`。二级菜单默认应设置为隐藏，例如使用CSS的`display:none`。 ```...
Android实现横向二级菜单
09-02
本教程将详细介绍如何在Android平台上实现一个横向二级菜单，这种菜单通常用于提供更精细的导航选项，提升用户体验。横向二级菜单在许多应用程序中都有应用，其美观的设计能吸引用户的眼球。 实现横向二级菜单主要...
js实现横向弹出二级菜单
06-05
在网页设计中，二级导航菜单是一种常见的交互元素，它能够帮助用户更方便地浏览和访问网站的深层内容。本文将详细讲解如何使用JavaScript实现一个横向弹出的二级菜单，包括菜单的显示、隐藏以及响应式行为。 首先，...
横向二级导航菜单css
02-25
横向二级导航的基于css菜单，可以把最后的float改成none,形成二级横向的菜单。
JS横向二级导航菜单
12-09
JS横向二级导航菜单 CSS样式控制<UL样式
css+js漂亮 二级横向导航菜单-大全
04-24
css+js 漂亮二级横向导航菜单-大全 样式多，供你选择
漂亮的蓝色横向二级导航菜单代码
04-05
NULL 博文链接：https://leeqoo.iteye.com/blog/1532948
css横向下拉二级导航菜单
04-10
这个效果还不错,主要是用于做导航条使用。。可以参考
HTML横向二级导航
Jason的学习笔记
04-13 3605
效果 HTML <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>企业小栈</title> <style type="text/css"> *{padding: 0;margi...
css二级横向导航条,纯CSS实现的横向二级导航菜单(无js兼容性强)
weixin_42346710的博客
08-04 1288
内容介绍热点排行相关文章下载地址↓纯CSS实现，无JavaScript，效果不错，实用性强，兼容各种浏览器！第一步：下载源代码及背景图片第二步：在网页区添加样式定义[code]/* ================================================================This copyright notice must be untouched at al...
js横向二级导航菜单
vera_xue的专栏
04-14 2692
网页特效 js横向二级导航菜单 站长特效网 body { text-align: center; background: #FFF; font: 12px Tahoma, sans-serif; color: #000; } img { border: 0; } ul,li { list-style:
横向二级菜单
CPU_2的专栏
07-25 552
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">    startList  =  function()  {            if(documen
css导航栏横向二级菜单
最新发布
11-05
这是一款使用jQuery和CSS实现的红色线条横向二级菜单效果。它带有导航菜单，当前选中的菜单项会以个性化的方式显示出来。当鼠标悬停在菜单上时，会显示菜单缺口。这是一个简单的二级导航栏，但实际上，我们通常看到的二级导航栏有很多链接，不仅有垂直的链接，还有很多水平的链接。下面我们将学习如何制作水平的二级导航栏。 首先，我们需要创建一个HTML结构，其中包含一个主菜单和一个子菜单。然后，我们使用CSS样式来设置菜单的外观和布局。最后，我们使用jQuery来添加交互效果，例如当鼠标悬停在菜单上时显示子菜单。 以下是一个简单的示例代码，可以帮助你更好地理解如何创建水平的二级导航栏： ```html <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a> <ul> <li><a href="#">Our Team</a></li> <li><a href="#">Our Story</a></li> </ul> </li> <li><a href="#">Services</a> <ul> <li><a href="#">Web Design</a></li> <li><a href="#">Graphic Design</a></li> <li><a href="#">SEO</a></li> </ul> </li> <li><a href="#">Contact</a></li> </ul> </nav> ``` ```css nav ul { list-style: none; margin: 0; padding: 0; background-color: #333; } nav ul li { display: inline-block; position: relative; } nav ul li a { display: block; padding: 0 10px; line-height: 40px; color: #fff; text-decoration: none; } nav ul li:hover > ul { display: block; } nav ul ul { display: none; position: absolute; top: 40px; left: 0; width: 100%; background-color: #333; } nav ul ul li { display: block; } nav ul ul li a { padding: 0 20px; line-height: 30px; } ``` ```javascript $(document).ready(function() { $('nav ul li').hover( function() { $(this).children('ul').slideDown(200); }, function() { $(this).children('ul').slideUp(200); } ); }); ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值