用css怎么制作下拉列表

最新推荐文章于 2022-05-07 15:40:43 发布
最新推荐文章于 2022-05-07 15:40:43 发布
阅读量363 收藏
点赞数
分类专栏： Html/Css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Heaven_of_relaxing/article/details/51096218
版权
<!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>无标题文档</title>
</head>
<style>
*{
margin:0;
padding:0;}
ul{
list-style-type:none;

}
.ul li{
width:100px;
float:left;
height:30px;
margin-left:10px;
}
.ul .li{
background:#9C6;
}
.ul2{
width:100px;
height:100px;
background:#F69;
display:none;
}
.li:hover .ul2{
display:block;
margin-left:-10px;

}
</style>

<body>
<ul class="ul">
<li class="li"><a href="" class="a">我的订单</a>
<ul class="ul2">
<li><a href="">新浪微博</a></li>
<li><a href="">腾讯微博</a></li>
<li><a href="">新浪客服微博</a></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>
<li><a href="">消息中心</a></li>
</ul>
</body>
</html>

 

 

主要：将要存放的下拉列表放在一个列标签中：先用display：none 进行隐藏 

　　在hover;中用display：block显示

 

（2）

 

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>利用float制作兼容ie6纯css下来菜单</title>
<style type="text/css">
* { margin:0; padding:0; }
ul { list-style:none; }
a:hover {color:#555; }
.nav { float:left; overflow:hidden; text-align:center; font-size:14px; }
.nav dd { float:left; width:300px; margin:-888px -150px 0 0; }
.nav dd a { float:left; margin-top:888px; display:block; position:relative; background:#eee; width:150px; height:30px; line-height:30px; border-bottom:1px solid #fff; }
.nav a:hover { margin-right:1px; background:#3cf; }
.nav dd ul { float:left; font-size:0; z-index:888; }
.nav dd li a { clear:left; width:150px; margin-top:0; font-size:14px; }
.nav dd li a:hover { margin-right:1px; }
</style>
</head>
<body>
<dl class="nav">
<dd><a href="">首页</a></dd>
<dd>
<a href="">关于我们</a>
<ul>
<li><a href="">公司简介</a></li>
<li><a href="">公司文化</a></li>
<li><a href="">企业荣誉</a></li>
<li><a href="">联系我们</a></li>
</ul>
</dd>
<dd>
<a href="">新闻动态</a>
<ul>
<li><a href="">国内新闻</a></li>
<li><a href="">国外新闻</a></li>
</ul>
</dd>
<dd>
<a href="">产品展示</a>
<ul>
<li><a href="">111</a></li>
<li><a href="">222</a></li>
</ul>
</dd>
</dl>
</body>
</html>

Only_to_meet
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
利用CSS做下拉列表
weixin_44286392的博客
05-31 645
第四篇 利用 :hover选择器 鼠标放上去后下拉列表出现，鼠标移走时列表消失。 效果图 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="shortcut icon" href="hpu.png"> <style> *{padding:0px;
css实现下拉列表
weixin_45369499的博客
09-06 6863
为什么要用下拉列表，因为有动态效果而且可看可不看的，我认为使用下拉列表对我们的页面有美化作用。 怎么实现？ 首先思路就是使用display属性来进行控制，这是网页设计非常重要的属性之一。关于display属性，我们应该要知道它具体的属性值和作用。因为属性值较多，我列举常用的几个属性： 属性值 作用 none 将元素隐藏 block 将元素变为块级元素 inline 默认，元...
纯css实现下拉菜单(超详细)
qq_28919991的博客
09-26 4万+
纯css写下拉菜单(超详细) ps：博主第一次发文章，不足之处还请指出 话不多说，直接进入正题吧 用ul 和 li标签写一个关联结构(ul 和 li的父子关系浑然天成，一般的关联结构都用它们) &amp;amp;lt;ul class=&amp;quot;nav&amp;quot;&amp;amp;gt; &amp;amp;lt;a href=&amp;quot;#&amp;quot;&amp;amp;gt;服装&amp;a
CSS实现下拉列表框
weixin_42280470的博客
11-27 1861
效果如图所示 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } .dropdown { position: relative; width: 100px; he
HTML+CSS实现导航条及下拉菜单
热门推荐
青梅煮酒
08-06 4万+
html+css实现下拉菜单
JS+CSS实现下拉列表框美化效果（3款）
11-28
本文通过结合JavaScript（JS）和层叠样式表（CSS）技术，提供了三款不同风格的下拉列表框美化方案，以提升用户体验和网页视觉效果。 首先，我们看到第一款美化后的下拉列表框被称为“U-Box Style”。这个设计通常会...
纯CSS制作二级导航下拉列表
04-30
本教程将详细讲解如何使用纯CSS技术来创建一个二级导航下拉列表，无需JavaScript，仅依赖HTML和CSS就能实现。这种方法既简单又高效，适用于初学者和有经验的开发者。 首先，我们需要构建HTML基础结构。一个基本的二...
CSS3下拉列表收缩展开特效
04-25
这种特效通常与JavaScript配合使用，当用户点击菜单按钮时，触发相应的CSS类的添加或删除，改变`transform`属性的值，从而实现下拉列表的显示和隐藏。可以使用事件监听器（如`addEventListener`）来实现这一功能。 ...
jquery+css实现下拉列表功能
10-19
本示例将介绍如何使用jQuery和CSS结合实现一个下拉列表功能。首先，我们来看一下涉及的关键知识点： 1. **jQuery**: jQuery 是一个轻量级的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画以及Ajax交互。...
css下拉列表
06-25
CSS时限鼠标划过显示下拉菜单，使用css实现简单的鼠标滑过显示下拉菜单
用ul和li来制作菜单下拉框
DiegoBrother的博客
08-05 1万+
  鼠标触碰该区域   因为我为了网页的更好布局我首先用一个div将ul括起来，ul里有li，li里嵌套一个ul，若是想制作多级菜单，便可再第二个ul的li里再嵌套一个ul便可制作出多级菜单。 部分代码实现如下：  html代码 &lt;div class="selectProperty"&gt;               &lt;ul&gt;                 &...
html5/css3 ul/li 下拉菜单展示
石羊博客专栏
11-25 5211
一、样式     a#trans { background: #fff; color: #aa0000; padding: 3px; -webkit-transition: all 1s linear; }     a#trans:hover { background: #220077; color: #fff; }     #trans-nav { list-style-type: n
纯html+css制作下拉菜单
佰草伐
08-15 1035
<!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=ut
html+css简单下拉菜单制作
no2015214099的博客
06-14 3万+
额，今天心血来潮做了个简单的下拉菜单，不过用的css操作的，啧！ 最终效果：
CSS 下拉列表
H56780的博客
05-07 4033
共有四点 使用CSS创建一个鼠标移动上去后显示下拉列表的效果。 当鼠标移动到指定元素上时，后出现下拉列表。实例： 实例解释 HTML部分: 我们可以使用任何的HTML元素来打开下拉列表，如：<span>,或a<button>元素。 使用容器元素（如：<div>）来创建下拉列表的内容，并放在任何你想放的位置上。 使用<div>元素来包裹这些元素，并使用CSS来设置下拉内容的样式。 CSS部分：.dropdown类使用position：relative
css实现列表下拉菜单_逐行：点击打开下拉列表和菜单的高级CSS技巧
cumi6497的博客
07-28 9466
css实现列表下拉菜单by David Piepgrass 由David Piepgrass 逐行：点击打开下拉列表和菜单的高级CSS技巧 (Line-by-line: advanced CSS tricks for click-to-open drop-down lists and menus) For as long as I can remember, there were always...
php下拉框css样式,css如何实现下拉菜单？css实现下拉菜单的方法（完整代码）
weixin_36251012的博客
03-19 203
本篇文章给大家带来的内容是关于css如何实现下拉菜单？css实现下拉菜单的方法(完整代码)，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。/*盒子，相对定位*/.dropdown{display:inline-block;position:relative;}button{background-color:pink;color:white;border:none;margin:6p...
CSS实现下拉列表
因为我是ZR 的博客
04-21 1万+
方法一： 1.首先写好结构，常用 ul 和 li 结合 <ul class="content"> <a >服装</a> <ul class="plat"> <li><a>外套</a></li> <li><a>棉袄</a></li> <li><a>裤衩</a></
LIBSVM参数实例详解.rar
最新发布
07-26
神经网络的matlab案例，本案例介绍如下： 技术深度：案例详细介绍了如何使用MATLAB进行深度学习模型的构建、训练和测试。 实际应用：通过具体的图像识别任务，展示模型的实际应用效果，让你直观感受神经网络的强大能力。 代码解析：提供完整的MATLAB代码，并对关键部分进行详细注释，帮助你理解每一步的工作原理。 优化策略：探讨不同的训练策略和参数调整方法，优化模型性能。
css select 下拉列表样式
06-08
可以使用以下 CSS 样式来设置下拉列表的样式： ``` select { width: 100%; padding: 12px 20px; margin: 8px 0; box-sizing: border-box; border: 2px solid #ccc; border-radius: 4px; background-color: #...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值