`
思-->手
  • 浏览: 2125 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

下拉框

    博客分类:
  • web
阅读更多
<!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> 
分享到:
评论

相关推荐

    可以输入的下拉框 下拉框和文本框组合共用

    可以输入的下拉框. 下拉框和文本框组合共用可以输入的下拉框. 下拉框和文本框组合共用可以输入的下拉框. 下拉框和文本框组合共用可以输入的下拉框. 下拉框和文本框组合共用可以输入的下拉框. 下拉框和文本框组合共用...

    6种样式的下拉框

    在网页设计和开发中,下拉框(Dropdown)是一种常见的用户界面元素,它允许用户从一组预定义的选项中选择一个。"6种样式的下拉框"项目提供了多种不同风格和效果的下拉框解决方案,旨在提升用户体验并增强网站的视觉...

    下拉框值触发另一个下拉框

    "下拉框值触发另一个下拉框"这个功能就是一种常见的交互设计,通常应用于表单或者数据选择场景。这样的设计能够帮助用户根据前一个选择来过滤或定制后一个选项,从而简化操作流程。 首先,我们来理解下拉框...

    EXTJS 选下拉框,并取得下拉框的值

    在EXTJS中,下拉框(ComboBox)是一种常见的UI组件,常用于用户选择一个或多个预定义的选项。本篇文章将详细讲解如何在EXTJS中操作下拉框,以及如何获取用户选定的值。 首先,创建一个基本的EXTJS下拉框需要定义`...

    下拉框设置为只读模式时不再弹出下拉框

    在网页设计和开发中,经常会遇到需要对交互元素进行特定控制的情况,比如将下拉框(Dropdown)设置为只读模式。"下拉框设置为只读模式时不再弹出下拉框"这个主题,主要涉及到HTML、CSS以及可能的JavaScript技术。...

    C# 自定义带搜索下拉框

    在C#编程中,自定义带搜索功能的下拉框是一种常见的需求,它能提供更加高效和便捷的用户交互体验。系统自带的下拉框(ComboBox)虽然简单易用,但在处理大量数据时,如果没有搜索功能,用户可能需要滚动浏览整个列表...

    下拉框和文本框组合共用-可以输入的下拉框ok

    在网页设计和开发中,"下拉框和文本框组合共用-可以输入的下拉框"是一个常见的交互元素,它结合了下拉选择框(Dropdown)和输入文本框(Input Text)的功能,以提供更灵活、用户友好的界面。这种设计通常用于场景,...

    bootstrap树形下拉框 下拉框树形菜单

    Bootstrap Tree形下拉框是一种将传统的下拉菜单与树形结构结合的UI组件,它使得在有限的空间内展示层级关系的数据变得更加直观和易用。在Web开发中,Bootstrap框架提供了丰富的样式和组件,大大简化了网页设计的工作...

    树形下拉框样式

    在IT领域,"树形下拉框样式"是一种常见的用户界面元素,主要用于数据组织和导航。它结合了传统的下拉框功能与树形结构,使得用户可以方便地浏览和选择层级关系的数据。这种设计通常应用于文件系统、组织结构或者分类...

    jquery+html自定义select下拉框,下拉框美化

    1. **布局**:通过CSS调整下拉框的大小、位置、边框和背景颜色,使其与页面其他元素保持一致。 2. **字体和颜色**:改变文本的字体、字号、颜色和行高,以提高可读性。 3. **箭头图标**:替换默认的下拉箭头,可以...

    Python爬虫之Selenium下拉框处理的实现

    在我们浏览网页的时候经常会碰到下拉框,WebDriver提供了Select类来处理下拉框,详情请往下看: 本章中用到的关键方法如下: select_by_value():设置下拉框的值 switch_to.alert.accept():定位并接受现有警告框...

    js多选下拉框多选下拉框多选下拉框

    在网页开发中,多选下拉框是一种常见的交互元素,用户可以从中选择多个选项。JavaScript(简称js)作为客户端脚本语言,常被用来增强网页的交互性,其中包括实现多选下拉框的功能。本文将深入探讨如何使用JavaScript...

    WPF颜色选择下拉框

    本主题将深入探讨如何实现一个“WPF颜色选择下拉框”,它是一个允许用户从一系列预设颜色中选择的下拉框控件,类似于WinForm中的背景颜色选择功能。我们将讨论如何自定义颜色选项、设置控件属性以及编写相应的XAML和...

    select 下拉框可以多选

    当我们需要让用户从一组选项中选择一个或多个项目时,`select`下拉框是常用的选择方式。在某些场景下,我们可能需要使`select`下拉框支持多选,即用户可以同时勾选多个选项。这就是"select下拉框可以多选"这个主题所...

    asp.net可输入可选择下拉框

    在ASP.NET开发中,下拉框(DropdownList)是一种常见的数据输入控件,通常用于提供一组预定义的选项供用户选择。然而,随着用户界面的需求不断升级,传统的下拉框可能无法满足所有场景,比如用户可能希望在下拉框中...

    下拉框添加删除按钮

    "下拉框添加删除按钮"是一个常见的交互设计元素,特别是在网页或应用的表单中,它允许用户不仅能选择已有的选项,还能方便地删除不再需要的条目。这个功能虽然可能不及QQ下拉列表那样丰富和复杂,但它的简洁性和实用...

    dataGridView动态绑定数据下拉框

    本话题将深入探讨如何实现“dataGridView动态绑定数据下拉框”的功能,即在dataGridView的某一列展示一个动态生成的下拉框,其内容来源于数据库字段,并且能够与文件列名建立对应关系,从而实现数据的导入。...

    Aspose.Cells下拉框及导入导出

    在这个主题中,我们将深入探讨Aspose.Cells如何实现下拉框(数据验证)的设置以及数据的导入与导出。 在Excel中,下拉框通常用于限制用户输入,使其只能选择预先定义的一系列值。Aspose.Cells允许开发者在工作表中...

Global site tag (gtag.js) - Google Analytics