纯CSS实现下拉列表

最新推荐文章于 2023-10-31 22:10:07 发布
最新推荐文章于 2023-10-31 22:10:07 发布
阅读量1k 收藏
点赞数
分类专栏： html css jsp 文章标签： css 相册 border xhtml html float
html 同时被 3 个专栏收录
6 篇文章 0 订阅
订阅专栏
jsp
5 篇文章 0 订阅
订阅专栏
css
4 篇文章 0 订阅
订阅专栏

<!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=gb2312" />
<title>无标题文档</title>
<style type="text/css">
*{ margin:0; padding:0;}
body{ font-size:12px; line-height:18px;}
li{ list-style:none;}
#nav{ position:relative; width:600px; margin:0 auto 10px; height:22px;}
#nav ul{ position:absolute;}
#nav ul li{ float:left; display:inline; width:120px; height:18px; padding-top:4px; overflow:hidden; margin:0 2px; text-align:center; background:#F5F5F5; color:#990; border:1px solid #EEE8DD; cursor:pointer; }
#nav ul .nav-on{height:auto;}
#nav ul li ul{ position:static;}
#nav ul li ul li{ display:block; padding:0; margin:0; height:27px; border:none;}
#nav ul li ul li a{ display:block; height:18px; padding:5px 0 4px; color:#666; text-decoration:none;}
#nav ul li ul li a:hover{ background:#539D26; color:#fff;}
.content { background:#ccc; width:600px; height:200px; margin:0 auto; }
</style>
</head>
<body>
<div id="nav">
<ul>
    <li οnmοuseοver="this.className='nav-on'" οnmοuseοut="this.className=''">我的首页
      <ul>
        <li><a href="#">我爱CSS</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>
    </li>
   <li οnmοuseοver="this.className='nav-on'" οnmοuseοut="this.className=''">社区圈子
       <ul>
        <li><a href="#">我的日志</a></li>
        <li><a href="#">我的相册</a></li>
        <li><a href="#">我的收藏</a></li>
      </ul>
    </li>
   <li οnmοuseοver="this.className='nav-on'" οnmοuseοut="this.className=''">我的短信
      <ul>
        <li><a href="#">我的首页</a></li>
        <li><a href="#">我的相册</a></li>
        <li><a href="#">我的收藏</a></li>
      </ul>
    </li>
   <li οnmοuseοver="this.className='nav-on'" οnmοuseοut="this.className=''">账户管理
      <ul>
        <li><a href="#">我爱CSS</a></li>
        <li><a href="#">我的首页</a></li>
        <li><a href="#">我的日志</a></li>
        <li><a href="#">我的日志</a></li>
      </ul>
    </li>
</ul>
</div>
<div class="content">这个div是测试nav合适与否的关键</div>
</body>
</html>

xueyepiaoling
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS 下拉列表
H56780的博客
05-07 4011
共有四点 使用CSS创建一个鼠标移动上去后显示下拉列表的效果。 当鼠标移动到指定元素上时，后出现下拉列表。实例： 实例解释 HTML部分: 我们可以使用任何的HTML元素来打开下拉列表，如：<span>,或a<button>元素。 使用容器元素（如：<div>）来创建下拉列表的内容，并放在任何你想放的位置上。 使用<div>元素来包裹这些元素，并使用CSS来设置下拉内容的样式。 CSS部分：.dropdown类使用position：relative
CSS3实现下拉列表的功能
xizi
06-27 3962
欢迎参观我的新网站：悦来[yuelai.xyz] CSS3实现下拉列表的功能 会发现很多网站使用的有下拉列表的功能，这样能够节省页面的空间，看起来也更好看。典型的就是腾讯云阿里云的下拉面板。里面各种综合的功能。 想要实现这种效果，方法很多，不借用JS，只用CSS便可以实现。 先写好基本的结构 &amp;amp;lt;nav&amp;amp;gt; &amp;amp;lt;ul&amp;amp;gt; &amp;amp;lt;l
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></
css实现下拉列表
weixin_45369499的博客
09-06 6842
为什么要用下拉列表，因为有动态效果而且可看可不看的，我认为使用下拉列表对我们的页面有美化作用。 怎么实现？ 首先思路就是使用display属性来进行控制，这是网页设计非常重要的属性之一。关于display属性，我们应该要知道它具体的属性值和作用。因为属性值较多，我列举常用的几个属性： 属性值 作用 none 将元素隐藏 block 将元素变为块级元素 inline 默认，元...
css-下拉菜单
01-03
热门标签 css3导航菜单 css3图片 css3 transform css3 transition css3价格表 css3进度条 css3提示框 css3时钟 css3三角形 css3按钮 css3圆角 css3渐变 css...
纯CSS实现下拉菜单的示例代码
09-24
总结，本示例展示了如何使用CSS实现下拉菜单的基本原理，包括利用`display: block`、`opacity`和`height`属性控制菜单的显示与隐藏，以及`transition`属性实现平滑过渡效果。通过理解这些基本概念，你可以进一步创建...
使用纯CSS写下拉列表
09-18
使用纯CSS写的下拉列表小例子，方便正在学习的人使用
纯CSS实现漂亮的下拉导航效果代码
09-24
本篇文章将详细解析如何使用纯CSS实现一个美观且功能完善的下拉导航效果。 首先，下拉导航的核心在于利用CSS的层叠结构（Cascading）和定位（Positioning）属性来创建动态的菜单项。在提供的代码示例中，我们可以...
纯CSS制作二级导航下拉列表
04-30
网页制作前端用纯CSS制作二级导航，用最简单的CSS样式实现二级导航下拉列表，html和css样式简洁清晰，一看就会，拿来就能直接用。
纯css实现的下拉导航栏附html结构及css样式
09-25
在网页设计中，下拉导航栏是一个常见的交互元素，它能有效地组织大量链接，提高用户体验。过去，我们通常依赖JavaScript库如...总的来说，理解和掌握纯CSS实现下拉导航栏的技术，对于前端开发者来说是一项重要的技能。
35+ 个免费下载的 HTML5&CSS3 下拉菜单
03-14
35+ 个免费下载的 HTML5&CSS3 下拉菜单
纯CSS下拉菜单
橙色卡布奇诺
06-10 590
纯css下拉菜单，二级下拉，三级下拉一样可以做，简单修改可以编程自己的代码
HTML + CSS 连载 | 36 - select 下拉列表
最新发布
JingnanJia的博客
10-31 4667
下拉列表也是一种选择类型的元素，下拉列表可以节省网页的空间，默认状态下只显示一个选项，只有在点击下拉按钮的时候才会显示多个选项，比如下面这里选择地址的时候就是使用的下拉列表。可以将整个表单作为一个整体来进行操作；比如对整个表单的数据进行。默认只能选择其中一个选项，但是我们可以通过设置布尔属性。可以看到默认已经显示了两个选项，当然我们也可以通过。元素可以创建一个下拉列表，而下拉列表的选项则由。当然我们想要对表单进行重置或者提交还需要添加添加。使用 LiverServer 打开，可以看到。
CSS基础学习--19 下拉菜单
yyxhzdm的博客
06-18 2946
我们可以使用任何的 HTML 元素来打开下拉菜单，如：, 或 a 元素。使用容器元素 (如： ) 来创建下拉菜单的内容，并放在任何你想放的位置上。使用 元素来包裹这些元素，并使用 CSS 来设置下拉内容的样式。（1）、设置左浮动的下拉菜单内容方向是从左到右，而不是从右到左。（2）、设置右浮动的下拉菜单内容方向是从右到左，而不是从左到右。如果你想设置下拉内容与下拉按钮的宽度一致，可设置。, 这将设置下拉菜单的内容放置在下拉按钮 (使用。
CSS 基础（020_下拉式菜单）
Google2606的博客
10-27 1107
原始地址：http://www.w3schools.com/css/css_dropdowns.asp 翻译： CSS 下拉式菜单（CSS Dropdowns） 使用 CSS 创建可悬停、下拉式菜单。 演示：下拉式菜单示例 移动鼠标至以下示例： 这里写代码片
CSS+JS完成下拉菜单
yehell的专栏
11-07 923
CSS+JSS完成下拉菜单code:SCRIPT LANGUAGE="JavaScript"> Beginvar refer=true;function combo() {if (refer) {  document.all.contents.style.visibility="visible";//所有样式内容可见  refer=false;}else {  document.a
html+css 下拉框
longjiahuang的博客
10-14 313
html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" type="text/css" href="css/index.css"/> </head> <body> <!-- 列表 --> <div class="lis
css实现列表下拉菜单_逐行：点击打开下拉列表和菜单的高级CSS技巧
cumi6497的博客
07-28 9418
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...
经典DIV+CSS下拉菜单
热门推荐
免费网络加-速-器游戏加/速/器
07-27 7万+
符合WEB标准的CSS下拉导航菜单布局及css下拉菜单模板   HTML代码如下 &lt;ul id="nav"&gt; &lt;li&gt;&lt;a href="###"&gt;div+css&lt;/a&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="###"&gt;CSS
纯css导航栏下拉列表
05-18
下面是一个简单的纯 CSS 导航栏下拉列表的示例： ``` /* 导航栏样式 */ .navbar { background-color: #333; overflow: hidden; } /* 链接样式 */ .navbar a { float: left; color: #f2f2f2; text-align: ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值