当前位置：移动技术网 > IT编程>开发语言>JavaScript > 搜集了几个不错的下拉菜单效果

搜集了几个不错的下拉菜单效果

2019年08月01日 | 移动技术网IT编程 | 我要评论

现在的下拉菜单是兼容性越来越好了，不用js的最好了，但如果能用最少的代码实现出效果，也是不错的
第一个，用到的js,不过很短，也很明了

这一个也不错

<!doctype html public "-//w3c//dtd html 4.01 transitional//en" "http://www.w3c.org/tr/1999/rec-html401-19991224/loose.dtd"> 
 
<html xmlns="http://www.w3.org/1999/xhtml"><head><title>the ultimate css only dropdown menu</title> 
<meta http-equiv="content-type" content="text/html; charset=gb2312"> 
<style type="text/css"> 
.menu { 
    font-size: 0.85em; width: 750px; font-family: verdana, sans-serif; position: relative 
} 
.menu ul { 
    padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px; list-style-type: none 
} 
.menu ul li { 
    float: left; position: relative 
} 
.menu ul li a { 
    border-right: #fff 1px solid; border-top: #fff 1px solid; display: block; padding-left: 10px; background: #dfc184; border-left: #fff 0px solid; width: 139px; color: #000; line-height: 3em; border-bottom: #fff 0px solid; height: 3em; text-decoration: none 
} 
.menu ul li a:visited { 
    border-right: #fff 1px solid; border-top: #fff 1px solid; display: block; padding-left: 10px; background: #dfc184; border-left: #fff 0px solid; width: 139px; color: #000; line-height: 3em; border-bottom: #fff 0px solid; height: 3em; text-decoration: none 
} 
* html .menu ul li a { 
    width: 139px 
} 
.menu ul li a:visited { 
    width: 139px 
} 
.menu ul li ul { 
    display: none 
} 
table { 
    font-size: 1em; margin: -1px; border-collapse: collapse 
} 
.menu ul li:hover a { 
    background: #bd8d5e; color: #fff 
} 
.menu ul li:hover ul { 
    margin-top: 1px; display: block; left: 0px; width: 150px; position: absolute; top: 3em 
} 
.menu ul li:hover ul li ul { 
    display: none 
} 
.menu ul li:hover ul li a { 
    padding-right: 10px; display: block; padding-left: 10px; background: #faeec7; padding-bottom: 5px; width: 129px; color: #000; line-height: 1.2em; padding-top: 5px; height: auto 
} 
.menu ul li:hover ul li a.drop { 
    background: url(drop.png) #c9c9a7 no-repeat right bottom 
} 
.menu ul li:hover ul li a:hover { 
    background: #c9c9a7; color: #000 
} 
.menu ul li:hover ul li:hover ul { 
    display: block; left: 150px; width: 150px; position: absolute; top: 0px 
} 
.menu ul li:hover ul li:hover ul.left { 
    left: -150px 
} 
</style> 
 
<meta content="mshtml 6.00.6000.16441" name="generator"></head> 
<body> 
<div class="menu"> 
<ul> 
  <li> 
  <table> 
    <tbody> 
    <tr> 
      <td> 
        <ul> 
          <li> </li> 
          <li> </li> 
          <li>  
          </li> 
          <li> </li> 
          <li> 
          <table> 
            <tbody> 
            <tr> 
              <td> 
                <ul> 
                  <li> </li> 
                  <li> </li> 
                  <li>  
                  </li></ul></td></tr></tbody></table></li> 
          <li class="upone"> </li> 
          <li> </li> 
          <li> </li> 
          <li> </li> 
          <li> </li></ul></td></tr></tbody></table></li> 
  <li> 
  <table> 
    <tbody> 
    <tr> 
      <td> 
        <ul> 
          <li> </li> 
          <li> </li> 
          <li> </li> 
          <li> </li> 
          <li>  
          </li> 
          <li> </li> 
          <li> </li></ul></td></tr></tbody></table></a></li> 
  <li> 
  <table> 
    <tbody> 
    <tr> 
      <td> 
        <ul> 
          <li> </li> 
          <li> </li> 
          <li>  
          </li> 
          <li> </li> 
          <li> </li> 
          <li> </li> 
          <li> </li> 
          <li> </li> 
          <li> </li></ul></td></tr></tbody></table></li> 
  <li> 
  <table> 
    <tbody> 
    <tr> 
      <td> 
        <ul> 
          <li> </li> 
          <li>  
          </li> 
          <li> </li></ul></td></tr></tbody></table></li> 
  <li> 
  <table> 
    <tbody> 
    <tr> 
      <td> 
        <ul> 
          <li> </li> 
          <li> </li> 
          <li> </li> 
          <li> </li> 
          <li> 
          <table> 
            <tbody> 
            <tr> 
              <td> 
                <ul class="left"> 
                  <li> </li> 
                  <li> </li> 
                  <li>  
                  </li></ul></td></tr></tbody></table></li></ul></td></tr></tbody></table></li></ul></div></body></html>

[ctrl+a 全选注:如需引入外部js需刷新才能执行]

http://www.jluvip.com/works/css/dropmenu/dropmenu.html

您可能感兴趣的文章:

如对本文有疑问，点击进行留言回复！！

荐超强的入门文章！！！ JavaScript 速成计划第二篇（杂项详解：JS操作HTML 与 CSS、异常、事件）!

作者：浪子花梦，一个有趣的程序员 ~此文将简单的讲解一个编程语言中最基础的东西，如变量、运算符、分支、循环、函数... [阅读全文]
Vue源码 - 2.数据劫持

新建src/index.jsimport { initMixin } from "./init"function... [阅读全文]
20200714 Dubbo+Zookeeper技术栈

Dubbo+Zookeeper 分布式项目搭建dubbo主要核心组件：1、Remoting:网络通信框架，实现了... [阅读全文]
教你搭建 nodejs+mongoose+Graphql+Vue+Typescript 框架（上）

前端: Vue + Typescript + Graphql + Jwtauto-page-web项目中使用 v... [阅读全文]
盘点7个强大的NODE.JS框架

Node.js是由Ryan Dahl于2009年创建的，它是一个开源的跨平台运行时环境，用于开发服务器端和网络应... [阅读全文]
架构集二---如何从中台角度搭建直播聊天室

前言视频直播已经是一种成熟的产品形态，在不同行业中有多种应用场景。在泛娱乐行业，游戏直播、秀场直播、演唱会直播等... [阅读全文]
权限设计

设计思想：1、拿到请求的url,/api/uses/addUsers 和对照表/conf/authAndApi.... [阅读全文]
Vue简单使用

Vue的简单使用vue是一种采用MVVM（Model View View-Model）架构的Js框架Vue插值表... [阅读全文]
【Nginx】如何为已安装的Nginx动态添加模块？看完我懂了！！

写在前面很多时候，我们根据当时的项目情况和业务需求安装完Nginx后，后续随着业务的发展，往往会给安装好的Ngi... [阅读全文]
荐微信小程序转钉钉小程序适配问题

与阿里云项目合作，作为ISV，不能使用腾讯系产品，必须将微信小程序项目转成钉钉小程序。经过12天的艰苦奋斗，基本... [阅读全文]

网友评论


验证码：

搜集了几个不错的下拉菜单效果

2019年08月01日 | 移动技术网IT编程 | 我要评论

您可能感兴趣的文章:

相关文章:

网友评论