<!DOCTYPE>
<html>
<head>
<title> new document </title>
<meta name="content" charset="utf-8">
<style type="text/css">
.fam-drop-menu * {
margin: 0;
padding: 0;
}
.fam-drop-menu a {
text-indent: 20px;
text-decoration: none;
line-height: 35px;
line-height: 35px;
color: #000;
font-family: Arial, Helvetica, Sans-Serif;
font-size: 10pt;
font-style: normal;
}
.fam-drop-menu ul {
list-style: none;
}
.fam-drop-menu > ul > li {
float: left;
display: inline-block;
width: 150px;
}
.fam-drop-menu ul ul li {
float: left;
display: block;
width: 100%;
}
.fam-drop-menu ul ul {
border: 1px solid #aaa;
background: #f1f1f1;
-webkit-box-shadow: 1px 1px 5px #AAA;
-moz-box-shadow: 1px 1px 5px #AAA;
box-shadow: 1px 1px 5px #AAA;
z-index: 9999;
}
.fam-drop-menu ul ul ul {
position: absolute;
float: left;
top: 35px;
left: -4px;
}
.fam-drop-menu ul li > ul {
width: 150px;
left: 151px;
_left: 0;
top: 0;
display: none;
}
.fam-drop-menu li a:hover {
color: #008df2;
}
.fam-drop-menu ul li a:hover {
background-color: #008df2;
color: #fff;
}
.fam-drop-menu ul ul li {
font-weight: normal;
}
.fam-drop-menu ul ul li:hover {
background-color: #9acd32;
font-weight: bold;
}
.fam-drop-menu ul li:hover > ul {
display: block;
}
.fam-drop-menu ul ul li {
position: relative;
float: left;
}
.fam-drop-menu ul li a {
display: block;
background: transparent;
border-bottom: 1px solid #e5e5e5;
_float: left;
}
</style>
</head>
<body>
<div class="fam-drop-menu">
<ul>
<li><a href="#">Blog</a></li>
<li><a href="#">Projects +</a>
<ul>
<li><a href="#">Websites +</a>
<ul>
<li><a href="#">Website 1</a></li>
<li><a href="#">Website 2</a></li>
<li><a href="#">Website 3</a></li>
<li><a href="#">Website 4</a></li>
</ul>
</li>
<li><a href="#">Website design</a></li>
<li><a href="#">Javascript</a></li>
</ul>
</li>
<li><a href="#">Learn +</a>
<ul>
<li><a href="#">Javascript +</a>
<ul>
<li><a href="#">Mootools +</a>
<ul>
<li><a href="#">Official +</a>
<ul>
<li><a href="#">Github Core</a></li>
<li><a href="#">Github More</a></li>
<li><a href="#">Lighthouse</a></li>
<li><a href="#">Mootorial</a></li>
<li><a href="#">Mootools Blog +</a>
<ul>
<li><a href="#">sub</a></li>
<li><a href="#">sub</a></li>
<li><a href="#">sub</a></li>
<li><a href="#">sub +</a>
<ul>
<li><a href="#">sub sub</a></li>
<li><a href="#">sub sub</a></li>
<li><a href="#">sub sub</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="#">eSteak.net</a></li>
<li><a href="#">Mooforum.net</a></li>
<li><a href="#">DavidWalsh.name</a></li>
</ul>
</li>
<li><a href="#">jQuery</a></li>
<li><a href="#">Quirksmode.org</a></li>
<li><a href="#">Ajaxian</a></li>
<li><a href="#">W3School</a></li>
</ul>
</li>
<li><a href="#">CSS +</a>
<ul>
<li><a href="#">W3Scool</a></li>
<li><a href="#">Ajaxian</a></li>
<li><a href="#">A List Apart</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Info</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</body>
</html>
分享到:
相关推荐
可以输入的下拉框. 下拉框和文本框组合共用可以输入的下拉框. 下拉框和文本框组合共用可以输入的下拉框. 下拉框和文本框组合共用可以输入的下拉框. 下拉框和文本框组合共用可以输入的下拉框. 下拉框和文本框组合共用...
在网页设计和开发中,下拉框(Dropdown)是一种常见的用户界面元素,它允许用户从一组预定义的选项中选择一个。"6种样式的下拉框"项目提供了多种不同风格和效果的下拉框解决方案,旨在提升用户体验并增强网站的视觉...
"下拉框值触发另一个下拉框"这个功能就是一种常见的交互设计,通常应用于表单或者数据选择场景。这样的设计能够帮助用户根据前一个选择来过滤或定制后一个选项,从而简化操作流程。 首先,我们来理解下拉框...
在EXTJS中,下拉框(ComboBox)是一种常见的UI组件,常用于用户选择一个或多个预定义的选项。本篇文章将详细讲解如何在EXTJS中操作下拉框,以及如何获取用户选定的值。 首先,创建一个基本的EXTJS下拉框需要定义`...
在网页设计和开发中,经常会遇到需要对交互元素进行特定控制的情况,比如将下拉框(Dropdown)设置为只读模式。"下拉框设置为只读模式时不再弹出下拉框"这个主题,主要涉及到HTML、CSS以及可能的JavaScript技术。...
在C#编程中,自定义带搜索功能的下拉框是一种常见的需求,它能提供更加高效和便捷的用户交互体验。系统自带的下拉框(ComboBox)虽然简单易用,但在处理大量数据时,如果没有搜索功能,用户可能需要滚动浏览整个列表...
在网页设计和开发中,"下拉框和文本框组合共用-可以输入的下拉框"是一个常见的交互元素,它结合了下拉选择框(Dropdown)和输入文本框(Input Text)的功能,以提供更灵活、用户友好的界面。这种设计通常用于场景,...
Bootstrap Tree形下拉框是一种将传统的下拉菜单与树形结构结合的UI组件,它使得在有限的空间内展示层级关系的数据变得更加直观和易用。在Web开发中,Bootstrap框架提供了丰富的样式和组件,大大简化了网页设计的工作...
在IT领域,"树形下拉框样式"是一种常见的用户界面元素,主要用于数据组织和导航。它结合了传统的下拉框功能与树形结构,使得用户可以方便地浏览和选择层级关系的数据。这种设计通常应用于文件系统、组织结构或者分类...
1. **布局**:通过CSS调整下拉框的大小、位置、边框和背景颜色,使其与页面其他元素保持一致。 2. **字体和颜色**:改变文本的字体、字号、颜色和行高,以提高可读性。 3. **箭头图标**:替换默认的下拉箭头,可以...
在我们浏览网页的时候经常会碰到下拉框,WebDriver提供了Select类来处理下拉框,详情请往下看: 本章中用到的关键方法如下: select_by_value():设置下拉框的值 switch_to.alert.accept():定位并接受现有警告框...
在网页开发中,多选下拉框是一种常见的交互元素,用户可以从中选择多个选项。JavaScript(简称js)作为客户端脚本语言,常被用来增强网页的交互性,其中包括实现多选下拉框的功能。本文将深入探讨如何使用JavaScript...
本主题将深入探讨如何实现一个“WPF颜色选择下拉框”,它是一个允许用户从一系列预设颜色中选择的下拉框控件,类似于WinForm中的背景颜色选择功能。我们将讨论如何自定义颜色选项、设置控件属性以及编写相应的XAML和...
当我们需要让用户从一组选项中选择一个或多个项目时,`select`下拉框是常用的选择方式。在某些场景下,我们可能需要使`select`下拉框支持多选,即用户可以同时勾选多个选项。这就是"select下拉框可以多选"这个主题所...
在ASP.NET开发中,下拉框(DropdownList)是一种常见的数据输入控件,通常用于提供一组预定义的选项供用户选择。然而,随着用户界面的需求不断升级,传统的下拉框可能无法满足所有场景,比如用户可能希望在下拉框中...
"下拉框添加删除按钮"是一个常见的交互设计元素,特别是在网页或应用的表单中,它允许用户不仅能选择已有的选项,还能方便地删除不再需要的条目。这个功能虽然可能不及QQ下拉列表那样丰富和复杂,但它的简洁性和实用...
本话题将深入探讨如何实现“dataGridView动态绑定数据下拉框”的功能,即在dataGridView的某一列展示一个动态生成的下拉框,其内容来源于数据库字段,并且能够与文件列名建立对应关系,从而实现数据的导入。...
在这个主题中,我们将深入探讨Aspose.Cells如何实现下拉框(数据验证)的设置以及数据的导入与导出。 在Excel中,下拉框通常用于限制用户输入,使其只能选择预先定义的一系列值。Aspose.Cells允许开发者在工作表中...