css布局实现多种下拉菜单导航显示效果代码
代码语言：html
所属分类：菜单导航
代码描述：css布局实现多种下拉菜单导航显示效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
/* ==========================================================================
NMC Bootstrap
This LESS file imports all other LESS files. You should compile
and minify this file before site launch.
========================================================================== */
/* Import NMC bootstrap */
/**
* html5doctor.com Reset Stylesheet
* v1.6.1
* Last Updated: 2010-09-17
* Author: Richard Clark - http://richclarkdesign.com
* Twitter: @rich_clark
*/
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
nav ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: '';
content: none;
}
a {
margin: 0;
padding: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
/* change colours to suit your needs */
ins {
background-color: #ff9;
color: #000;
text-decoration: none;
}
/* change colours to suit your needs */
mark {
background-color: #ff9;
color: #000;
font-style: italic;
font-weight: bold;
}
del {
text-decoration: line-through;
}
abbr[title],
dfn[title] {
border-bottom: 1px dotted;
cursor: help;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* change border colour to suit your needs */
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #cccccc;
margin: 1em 0;
padding: 0;
}
input,
select {
vertical-align: middle;
}
/*---------------------------------------------------
LESS Prefixer
---------------------------------------------------
All of the CSS3 fun, none of the prefixes!
As a rule, you can use the CSS properties you
would expect just by adding a '.':
box-shadow => .box-shadow(@args)
Also, when shorthand is available, arguments are
not parameterized. Learn CSS, not LESS Prefixer.
-------------------------------------------------
TABLE OF CONTENTS
(*) denotes a syntax-sugar helper
-------------------------------------------------
.animation(@args)
.animation-delay(@delay)
.animation-direction(@direction)
.animation-duration(@duration)
.animation-iteration-count(@count)
.animation-name(@name)
.animation-play-state(@state)
.animation-timing-function(@function)
.background-size(@args)
.border-radius(@args)
.box-shadow(@args)
.inner-shadow(@args) *
.box-sizing(@args)
.border-box() *
.content-box() *
.columns(@args)
.column-count(@count)
.column-gap(@gap)
.column-rule(@args)
.column-width(@width)
.gradient(@default,@start,@stop) *
.linear-gradient-top(@default,@color1,@stop1,@color2,@stop2,[@color3,@stop3,@color4,@stop4])*
.linear-gradient-left(@default,@color1,@stop1,@color2,@stop2,[@color3,@stop3,@color4,@stop4])*
.opacity(@factor)
.transform(@args)
.rotate(@deg)
.scale(@factor)
.translate(@x,@y)
.translate3d(@x,@y,@z)
.translateHardware(@x,@y) *
.text-shadow(@args)
.transition(@args)
.transition-delay(@delay)
.transition-duration(@duration)
.transition-property(@property)
.transition-timing-function(@function)
Credit to LESS Elements for the motivation and
to CSS3Please.com for implementation.
Copyright (c) 2012 Joel Sutherland
MIT Licensed:
https://www.opensource.org/licenses/mit-license.php
-----------------------------------------------------*/
/* Animation */
/* Background Size */
/* Border Radius */
/* Box Shadows */
/* Box Sizing */
/* Columns */
/* Gradients */
/* Opacity */
/* Text Shadow */
/* Transforms */
/* Transitions */
/**
* New Media Campaigns Idioms
*
* These are common patterns we use in all of our
* projects. They are consolidated here to keep code DRY.
*
* Listing
* * .noText,.textReplace
* * .noList
* * .noForm
* * .fixedWidth(@width)
* * .columnWidth(@width)
* * .columnLeft(@width)
* * .columnRight(@width)
* * .fullSize
* * .absoluteDefault
* * .absoluteFullSize
* * .clearFix
*/
/* Hides text when using image replacement */
.noText,
.textReplace {
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
}
/* Removes bullets, margin, and padding from list */
.noList {
list-style: none;
margin: 0;
padding: 0;
}
/* Removes webkit styling from form element */
.noForm {
border: none;
margin: 0;
padding: 0;
-webkit-appearance: none;
}
/* Center a fixed width container */
/* Adds left or right columns (e.g. content and sidebar) */
/* Set width and height of element to that of its parent */
.fullSize {
height: 100%;
width: 100%;
}
/* Position element absolutely to 0,0 */
.absoluteDefault {
position: absolute;
left: 0;
top: 0;
}
/* Position element absolutely and set its width and height to that of its parent (useful for slideshows) */
.absoluteFullSize {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
}
/* The micro clearfix http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearFix {
*zoom: 1;
}
.clearFix:before,
.clearFix:after {
content: "";
display: table;
}
.clearFix:after {
clear: both;
}
/**
* Spacing
*
* This LESS file defines margins and paddings for block-level
* elements. Helper classes are included for use elsewhere
* in site styles.
*/
/* Settings */
/**
* Spacing
* p, m, lh = padding, margin, line-height
* a, t, r, b, l, h, v = all, top, right, bottom, left, horizontal, vertical
* n, h, s, d = none(0px), half(@baseline / 2), single(@baseline), double(@baseline * 2), none(0px)
* i = ! important
*/
.ptn {
padding-top: 0px;
}
.ptni {
padding-top: 0px !important;
}
.pbn {
padding-bottom: 0px;
}
.pbni {
padding-bottom: 0px !important;
}
.pln {
padding-left: 0px;
}
.plni {
padding-left: 0px !important;
}
.prn {
padding-right: 0px;
}
.prni {
padding-right: 0px !important;
}
.pvn {
padding-top: 0px;
padding-bottom: 0px;
}
.pvni {
padding-top: 0px !important;
padding-bottom: 0px !important;
}
.phn {
padding-left: 0px;
padding-right: 0px;
}
.phni {
padding-left: 0px !important;
padding-right: 0px !important;
}
.pan {
padding-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
}
.pani {
padding-top: 0px !important;
padding-bottom: 0px !important;
padding-left: 0px !important;
padding-right: 0px !important;
}
.mtn {
margin-top: 0px;
}
.mtni {
margin-top: 0px !important;
}
.mbn {
margin-bottom: 0px;
}
.mbni {
margin-bottom: 0px !important;
}
.mln {
margin-left: 0px;
}
.mlni {
margin-left: 0px !important;
}
.mrn {
margin-right: 0px;
}
.mrni {
margin-right: 0px !important;
}
.mvn {
margin-top: 0px;
margin-bottom: 0px;
}
.mvni {
margin-top: 0px !important;
margin-bottom: 0px !important;
}
.mhn {
margin-left: 0px;
margin-right: 0px;
}
.mhni {
margin-left: 0px !important;
margin-right: 0px !important;
}
.man {
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
}
.mani {
margin-top: 0px !important;
margin-bottom: 0px !important;
margin-left: 0px !important;
margin-right: 0px !important;
}
.lhn {
line-height: 0px;
}
.lhni {
line-height: 0px !important;
}
.ptq {
padding-top: 4px;
}
.ptqi {
padding-top: 4px !important;
}
.pbq {
padding-bottom: 4px;
}
.pbqi {
padding-bottom: 4px !important;
}
.plq {
padding-left: 4px;
}
.plqi {
padding-left: 4px !important;
}
.prq {
padding-right: 4px;
}
.prqi {
padding-right: 4px !important;
}
.pvq {
padding-top: 4px;
padding-bottom: 4px;
}
.pvqi {
padding-top: 4px !important;
padding-bottom: 4px !important;
}
.phq {
padding-left: 4px;
padding-right: 4px;
}
.phqi {
padding-left: 4px !important;
padding-right: 4px !important;
}
.paq {
padding-top: 4px;
padding-bottom: 4px;
padding-left: 4px;
padding-right: 4px;
}
.paqi {
padding-top: 4px !important;
padding-bottom: 4px !important;
padding-left: 4px !important;
padding-right: 4px !important;
}
.mtq {
margin-top: 4px;
}
.mtqi {
margin-top: 4px !important;
}
.mbq {
margin-bottom: 4px;
}
.mbqi {
margin-bottom: 4px !important;
}
.mlq {
margin-left: 4px;
}
.mlqi {
margin-left: 4px !important;
}
.mrq {
margin-right: 4px;
}
.mrqi {
margin-right: 4px !important;
}
.mvq {
margin-top: 4px;
margin-bottom: 4px;
}
.mvqi {
margin-top: 4px !important;
margin-bottom: 4px !important;
}
.mhq {
margin-left: 4px;
margin-right: 4px;
}
.mhqi {
margin-left: 4px !important;
margin-right: 4px !important;
}
.maq {
margin-top: 4px;
margin-bottom: 4px;
margin-left: 4px;
margin-right: 4px;
}
.maqi {
margin-top: 4px !important;
margin-bottom: 4px !important;
margin-left: 4px !important;
margin-right: 4px !important;
}
.lhq {
line-height: 4px;
}
.lhqi {
line-height: 4px !important;
}
.pth {
padding-top: 8px;
}
.pthi {
padding-top: 8px !important;
}
.pbh {
padding-bottom: 8px;
}
.pbhi {
padding-bottom: 8px !important;
}
.plh {
padding-left: 8px;
}
.plhi {
padding-left: 8px !important;
}
.prh {
padding-right: 8px;
}
.prhi {
padding-right: 8px !important;
}
.pvh {
padding-top: 8px;
padding-bottom: 8px;
}
.pvhi {
padding-top: 8px !important;
padding-bottom: 8px !important;
}
.phh {
padding-left: 8px;
padding-right: 8px;
}
.phhi {
padding-left: 8px !important;
padding-right: 8px !important;
}
.pah {
padding-top: 8px;
padding-bottom: 8px;
padding-left: 8px;
padding-right: 8px;
}
.pahi {
padding-top: 8px !important;
padding-bottom: 8px !important;
padding-left: 8px !important;
padding-right: 8px !important;
}
.mth {
margin-top: 8px;
}
.mthi {
margin-top: 8px !important;
}
.mbh {
margin-bottom: 8px;
}
.mbhi {
margin-bottom: 8px !important;
}
.mlh {
margin-left: 8px;
}
.mlhi {
margin-left: 8px !important;
}
.mrh {
margin-right: 8px;
}
.mrhi {
margin-right: 8px !important;
}
.mvh {
margin-top: 8px;
margin-bottom: 8px;
}
.mvhi {
margin-top: 8px !important;
margin-bottom: 8px !important;
}
.mhh {
margin-left: 8px;
margin-right: 8px;
}
.mhhi {
margin-left: 8px !important;
margin-right: 8px !important;
}
.mah {
margin-top: 8px;
margin-bottom: 8px;
margin-left: 8px;
margin-right: 8px;
}
.mahi {
margin-top: 8px !important;
margin-bottom: 8px !important;
margin-left: 8px !important;
margin-right: 8px !important;
}
.lhh {
line-height: 8px;
}
.lhhi {
line-height: 8px !important;
}
.pts {
padding-top: 16px;
}
.ptsi {
padding-top: 16px !important;
}
.pbs {
padding-bottom: 16px;
}
.pbsi {
padding-bottom: 16px !important;
}
.pls {
padding-left: 16px;
}
.plsi {
padding-left: 16px !important;
}
.prs {
padding-right: 16px;
}
.prsi {
padding-right: 16px !important;
}
.pvs {
padding-top: 16px;
padding-bottom: 16px;
}
.pvsi {
padding-top: 16px !important;
padding-bottom: 16px !important;
}
.phs {
padding-left: 16px;
padding-right: 16px;
}
.phsi {
padding-left: 16px !important;
padding-right: 16px !important;
}
.pas {
padding-top: 16px;
padding-bottom: 16px;
padding-left: 16px;
padding-right: 16px;
}
.pasi {
padding-top: 16px !important;
padding-bottom: 16px !important;
padding-left: 16px !important;
padding-right: 16px !important;
}
.mts {
margin-top: 16px;
}
.mtsi {
margin-top: 16px !important;
}
.mbs {
margin-bottom: 16px;
}
.mbsi {
margin-bottom: 16px !important;
}
.mls {
margin-left: 16px;
}
.mlsi {
margin-left: 16px !important;
}
.mrs {
margin-right: 16px;
}
.mrsi {
margin-right: 16px !important;
}
.mvs {
margin-top: 16px;
margin-bottom: 16px;
}
.mvsi {
margin-top: 16px !important;
margin-bottom: 16px !important;
}
.mhs {
margin-left: 16px;
margin-right: 16px;
}
.mhsi {
margin-left: 16px !important;
margin-right: 16px !important;
}
.mas {
margin-top: 16px;
margin-bottom: 16px;
margin-left: 16px;
margin-right: 16px;
}
.masi {
margin-top: 16px !important;
margin-bottom: 16px !important;
margin-left: 16px !important;
margin-right: 16px !important;
}
.lhs {
line-height: 16px;
}
.lhsi {
line-height: 16px !important;
}
.pt3h {
padding-top: 24px;
}
.pt3hi {
padding-top: 24px !important;
}
.pb3h {
padding-bottom: 24px;
}
.pb3hi {
padding-bottom: 24px !important;
}
.pl3h {
padding-left: 24px;
}
.pl3hi {
padding-left: 24px !important;
}
.pr3h {
padding-right: 24px;
}
.pr3hi {
padding-right: 24px !important;
}
.pv3h {
padding-top: 24px;
padding-bottom: 24px;
}
.pv3hi {
padding-top: 24px !important;
padding-bottom: 24px !important;
}
.ph3h {
padding-left: 24px;
padding-right: 24px;
}
.ph3hi {
padding-left: 24px !important;
padding-right: 24px !important;
}
.pa3h {
padding-top: 24px;
padding-bottom: 24px;
padding-left: 24px;
padding-right: 24px;
}
.pa3hi {
pad.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0