纵向导航菜单及二级弹出菜单 样式

最新推荐文章于 2022-05-17 11:14:38 发布
最新推荐文章于 2022-05-17 11:14:38 发布
阅读量2.8k 收藏
点赞数
文章标签： stylesheet webform xhtml html c#
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/leapenemc0907/article/details/6884570
版权

==============以下HTML===========

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="Wapp1.div_css.WebForm2" %>

<!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 runat="server">
 <title></title>
 <link href="css.css" rel="stylesheet" type="text/css" />
</head>
<body>
 <div id="menu">
  <ul>
   <li><a href="#">男装</a>
    <ul>
     <li>上衣</li>
     <li>下衣</li>
     <li>服装配饰</li>
    </ul>
   </li>
   <li><a href="#">女装</a>
    <ul>
     <li>系列</li>
     <li>上衣</li>
     <li>下衣</li>
     <li>服装配饰</li>
    </ul>
   </li>
   <li><a href="#">童装</a>
    <ul>
     <li>男孩</li>
     <li>女孩</li>
     <li>亲子</li>
     <li>孕妇装</li>
    </ul>
   </li>
   <li><a href="#">鞋子</a>
    <ul>
     <li>男鞋</li>
     <li>女鞋</li>
     <li>童鞋</li>
     <li>运动鞋</li>
    </ul>
   </li>
   <li><a href="#">运动</a></li>
   <li><a href="#">内衣</a></li>
   <li><a href="#">化妆品</a></li>
   <li><a href="#">百货</a></li>
   <li><a href="#">箱包</a></li>
   <li><a href="#">家居服</a></li>
   <li><a href="#">风尚男装</a></li>
  </ul>
 </div>
</body>
</html>

 

==========以下为样式===============

body
{
 font-family: Verdana;
 font-size: 12px;
}

#menu
{
 width: 100px;
 border: 1px solid #CCC;
}

#menu ul
{
 list-style: none;
 margin: 0px;
 padding: 0px;
}

#menu ul li
{
 background: #eee;
 padding: 0px 8px;
 height: 26px;
 line-height: 26px;
 border-bottom: 1px solid #CCC;
 position: relative;
}

#menu ul li ul
{
 display: none;
 position: absolute;
 left: 100px;
 top: 0px;
 width: 100px;
 border: 1px solid #ccc;
 border-bottom: none;
}


#menu ul li:hover ul
{
 display: block;
}

a
{
 color: #000;
 text-decoration: none;
}
a:hover
{
 color: #F00;
 text-decoration: underline;
}

 

 

leapenemc0907
关注
学习笔记（2）纵向导航菜单及二级弹出菜单
weixin_44433499的博客
04-24 1108
纵向列表 标签的默认样式 css派生选择器 css选择器的分组 纵向二级列表 相对定位和绝对定位 1.纵向列表 先新建一个页面，div 、ul、li。 <div id="menu"> <ul> <li>首页</li> <li>网页版式布局</li> <li>div+css教程</li...
学习笔记（2）纵向导航菜单及二级弹出菜单，前端学习笔记
最新发布
2401_84097774的博客
04-06 430
如果我们把前边的#menu去掉，那么将是对ul标签重定义，重定义的属性将应用到全局，而前边加上#menu后，将是定义ID为menu元素内ul的样式，设置它的样式只对#menu下的ul生效，不对它之后的ul生效，这个有点像编程中的局部变量，而直接定义ul则相当于全局变量。#menu ul li 是定义ID为menu元素内ul下的li，派生选择器可以使我们不用再给每个li定义一个样式名来定义样式，只需使用派生选择器，从它的父元素处选择即可，这样能大大提高效率。在下面的例子中，我们对所有的标题元素进行了分组。
js导航菜单左侧竖纵向二级导航菜单可点击展开与收缩子菜单
12-19
js导航菜单左侧竖纵向二级导航菜单可点击展开与收缩子菜单
二级菜单
u011155153的专栏
07-04 1827
默认样式鼠标移上去的样式点击以后的样式&lt;html&gt;&lt;head&gt;    &lt;title&gt;二级菜单测试&lt;/title&gt;    &lt;meta charset="utf-8"&gt;    &lt;script   type="text/javascript" src="js/jquery-1.8.2.js"&g
CSS设置二级菜单样式
weixin_38891150的博客
04-04 2631
效果如下：代码如下：&lt;%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%&gt; &lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html
创建纵向二级菜单
qq_53541336的博客
02-25 1854
一、今天来总结一下如何利用列表标签创建一个纵向弹跳的二级菜单，其实是很简单的一些知识点，二级菜单在写HTML这一块中运用最多的大概就是列表标签ul、li,其次就是超链接a,然后js里面也是运用了简单的当鼠标点击和鼠标离开的时候添加了事件监听，具体代码如下： HTML： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <
html二级菜单纵向,纯CSS制作二级导航菜单(纵向)，不用JS/jquery，响应速度快
weixin_30569303的博客
05-30 1327
制作二级导航菜单(纵向)#menu{width: 200px;border: 1px solid #999;}#menu ul{margin: 0px;padding: 0px;list-style: none;/* 隐藏默认列表符号*/}#menu ul li{background: #06C;height: 35px;line-height: 35px; /*行距*/text-align: ...
第四天纵向导航菜单及二级弹出菜单.pdf
11-12
总结来说，创建一个纵向导航菜单及二级弹出菜单涉及理解HTML结构、CSS选择器（包括派生选择器）、清除默认样式以及定义交互性样式。通过掌握这些知识点，你可以构建出专业且用户友好的网页导航系统。在实际项目中，...
css纵向导航菜单及二级弹出菜单
12-23
本主题聚焦于“css纵向导航菜单及二级弹出菜单”，这是一种常见的交互式网页设计技术，尤其适用于内容层次丰富的网站。 首先，让我们详细了解纵向导航菜单。纵向菜单，也称为侧边栏菜单，通常位于网页的一侧（左侧...
CSS二级菜单
weixin_30687587的博客
06-12 445
0.需求：当鼠标hover到按钮上时，出现下拉菜单导航条。 1.问题拆解： （1）HTML应该如何组织比较方便合理 因为题中要求下拉菜单位于按钮的正下方，可以使用列表<li>中嵌套无序列表<ul>的方式，设置<ul>padding值为0。（2）如何实现下拉菜单在鼠标没有hover到按钮上时不出现使用定位隐藏，设置下拉菜单为绝对定位，设置一个负的很大的...
经典二级导航菜单样式.rar
07-04
经典二级导航菜单样式
两种二级树形导航菜单样式
08-18
在懒人建站网站上面找到的二级的菜单导航样式，适合制作网页时应用
jquery 横纵向两种二级菜单
03-20
NULL 博文链接：https://hui525.iteye.com/blog/800735
漂亮的纵向二级菜单，只展开一个
05-09
一个纵向下拉菜单~而二级菜单，可以增加到多级，灰色，只展开一个，其他默认收回
经典的CSS二级菜单修改：弹簧式
01-04
博文《CSS二级菜单》（http://blog.csdn.net/smallfools/archive/2009/06/26/4300726.aspx）中的源代码之一
纵向二级菜单
微信号codek2 专注于 Android 开源项目源码解析 开源项目分享
07-22 1402
CSS Menu - Vertical h1 { font: bold 16px Arial, Helvetica, sans-serif; } p { font: 11px Aria
纵向导航菜单，点击产生二级菜单
chenweihua556的专栏
05-22 394
&lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;title&gt;ERP信息管理系统&lt;/title&gt; &lt;style type="text/css"&g
css案例1——一级菜单、二级菜单、三级菜单、四级菜单
努力、拼搏、奋进
05-17 9249
纯css实现二级菜单、三级菜单、四级菜单，代码易理解，上手操作快。
[css] 二级菜单布局
qq_14993591的博客
08-10 324
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值