网页导航样式一源码分享

一、html源码：

<h1>Theme 1</h1>

<div id="menu1">

    <ul class="menu-top">

        <li><a href="#" class="menu-button"><span class="menu-label">Home</span></a></li>

        <li><a href="#" class="menu-button menu-drop"><span class="menu-label">About</span></a>

            <div class="menu-dropdown menu-dropdown1">

                <ul class="menu-sub">

                    <li><a href="#" class="menu-subbutton"><span class="menu-label">Who We Are</span></a></li>

                    <li><a href="#" class="menu-subbutton"><span class="menu-label">What We Do</span></a></li>

                    <li><a href="#" class="menu-subbutton"><span class="menu-label">Our Goals</span></a></li>

                    <li><a href="#" class="menu-subbutton"><span class="menu-label">Our Awards</span></a></li>

                    <li><a href="#" class="menu-subbutton"><span class="menu-label">Our Team</span></a></li>

                </ul>

            </div>

        </li>

        <li><a href="#" class="menu-button menu-drop"><span class="menu-label">Services</span></a>

            <div class="menu-dropdown menu-dropdown2">

                <ul class="menu-sub">

                    <li><a href="#" class="menu-subbutton"><span class="menu-label">Web Design</span>

                        <div class="menu-desc">Lorem ipsum dolor</div>

                    </a></li>

                    <li><a href="#" class="menu-subbutton"><span class="menu-label">Programming</span>

                        <div class="menu-desc">Lorem ipsum dolor</div>

                    </a></li>

                    <li><a href="#" class="menu-subbutton"><span class="menu-label">Advertising</span>

                        <div class="menu-desc">Lorem ipsum dolor</div>

                    </a></li>

                    <li><a href="#" class="menu-subbutton"><span class="menu-label">Marketing</span>

                        <div class="menu-desc">Lorem ipsum dolor</div>

                    </a></li>

                    <li><a href="#" class="menu-subbutton"><span class="menu-label">E-commerce</span>

                        <div class="menu-desc">Lorem ipsum dolor</div>

                    </a></li>

                </ul>

            </div>

        </li>

        <li><a href="#" class="menu-button menu-drop"><span class="menu-label">Portfolio</span></a>

            <div class="menu-dropdown menu-dropdown3">

                <div class="menu-row"><h1>HTML</h1>

                    <ul class="menu-sub">

                        <li><a href="#" class="menu-subbutton"><span class="menu-label">Pellentesq</span></a></li>

                        <li><a href="#" class="menu-subbutton"><span class="menu-label">Et rhoncus</span></a></li>

                        <li><a href="#" class="menu-subbutton"><span class="menu-label">Ligula eget</span></a></li>

                        <li><a href="#" class="menu-subbutton"><span class="menu-label">Turpis quis</span></a></li>

                        <li><a href="#" class="menu-subbutton"><span class="menu-label">Vivamus ut</span></a></li>

                    </ul>

                </div>

                <div class="menu-row"><h1>Flash</h1>

                    <ul class="menu-sub">

                        <li><a href="#" class="menu-subbutton"><span class="menu-label">Commodo</span></a></li>

                        <li><a href="#" class="menu-subbutton"><span class="menu-label">Pulvinar</span></a></li>

                        <li><a href="#" class="menu-subbutton"><span class="menu-label">Curabitur</span></a></li>

                        <li><a href="#" class="menu-subbutton"><span class="menu-label">Aliquam</span></a></li>

                        <li><a href="#" class="menu-subbutton"><span class="menu-label">Vulputate</span></a></li>

                    </ul>

                </div>

                <div class="menu-row"><h1>Mobile</h1>

                    <ul class="menu-sub">

                        <li><a href="#" class="menu-subbutton"><span class="menu-label">Lorem ipsum</span></a></li>

                        <li><a href="#" class="menu-subbutton"><span class="menu-label">Dolor amet</span></a></li>

                        <li><a href="#" class="menu-subbutton"><span class="menu-label">Consectetur</span></a></li>

                        <li><a href="#" class="menu-subbutton"><span class="menu-label">Adipiscing</span></a></li>

                        <li><a href="#" class="menu-subbutton"><span class="menu-label">Duis ut nibh</span></a></li>

                    </ul>

                </div>

            </div>

        </li>

        <li><a href="#" class="menu-button menu-drop"><span class="menu-label">Clients</span></a>

            <div class="menu-dropdown menu-dropdown4">

                <div class="menu-row">

                    <div><h1>America</h1>

                        <ul class="menu-sub">

                            <li><a href="#" class="menu-subbutton"><span class="menu-label">Lorem ipsum</span></a></li>

                            <li><a href="#" class="menu-subbutton"><span class="menu-label">Dolor amet</span></a></li>

                            <li><a href="#" class="menu-subbutton"><span class="menu-label">Consectetur</span></a></li>

                        </ul>

                    </div>

                    <div><h1>Africa</h1>

                        <ul class="menu-sub">

                            <li><a href="#" class="menu-subbutton"><span class="menu-label">Pulvinar in</span></a></li>

                            <li><a href="#" class="menu-subbutton"><span class="menu-label">Consectet</span></a></li>

                            <li><a href="#" class="menu-subbutton"><span class="menu-label">Aliquam eu</span></a></li>

                        </ul>

                    </div>

                </div>

                <div class="menu-row">

                    <div><h1>Europe</h1>

                        <ul class="menu-sub">

                            <li><a href="#" class="menu-subbutton"><span class="menu-label">Pellentesq</span></a></li>

                            <li><a href="#" class="menu-subbutton"><span class="menu-label">Et rhoncus</span></a></li>

                            <li><a href="#" class="menu-subbutton"><span class="menu-label">Ligula eget</span></a></li>

                        </ul>

                    </div>

                    <div><h1>Asia</h1>

                        <ul class="menu-sub">

                            <li><a href="#" class="menu-subbutton"><span class="menu-label">Turpis quis</span></a></li>

                            <li><a href="#" class="menu-subbutton"><span class="menu-label">Vivamus ut</span></a></li>

                            <li><a href="#" class="menu-subbutton"><span class="menu-label">Commodo</span></a></li>

                        </ul>

                    </div>

                </div>

            </div>

        </li>

        <li><a href="#" class="menu-button menu-drop"><span class="menu-label">Contact</span></a>

            <div class="menu-dropdown menu-dropdown5">

                <ul class="menu-sub">

                    <li><a href="#" class="menu-subbutton"><span class="menu-label">Pellente</span><span class="menu-desc"> - Lorem ipsum dolor sit am</span></a></li>

                    <li><a href="#" class="menu-subbutton"><span class="menu-label">Et rhonc</span><span class="menu-desc"> - Lorem ipsum dolor sit am</span></a></li>

                    <li><a href="#" class="menu-subbutton"><span class="menu-label">Ligulaeg</span><span class="menu-desc"> - Lorem ipsum dolor sit am</span></a></li>

                    <li><a href="#" class="menu-subbutton"><span class="menu-label">Turpisqu</span><span class="menu-desc"> - Lorem ipsum dolor sit am</span></a></li>

                    <li><a href="#" class="menu-subbutton"><span class="menu-label">Vivamus</span><span class="menu-desc"> - Lorem ipsum dolor sit am</span></a></li>

                    <li><a href="#" class="menu-subbutton"><span class="menu-label">Doloram</span><span class="menu-desc"> - Lorem ipsum dolor sit am</span></a></li>

                    <li><a href="#" class="menu-subbutton"><span class="menu-label">Consect</span><span class="menu-desc"> - Lorem ipsum dolor sit am</span></a></li>

                    <li><a href="#" class="menu-subbutton"><span class="menu-label">Loremipe</span><span class="menu-desc"> - Lorem ipsum dolor sit am</span></a></li>

                </ul>

            </div>

        </li>

        <li class="menu-right"><a href="#" class="menu-button menu-drop"><span class="menu-label">Info</span></a>

            <div class="menu-dropdown menu-dropdown7"><h1>Quick Info</h1>

                <p><span class="emp">Lorem ipsum dolor</span> sit amet, optiones congue adipiscing elit, sed diam exp

                    nonummy nibh euismod tincidunt utd.

                <p>

                <p class="quote">Laoreet dolore magna aliquam erates volutpat. Ut wisi enim ad eleifend exp minim

                    veniam, quis. u feugiat nulla.</p>

                <p><span class="emp">Facilisis at vero</span> eros et accumsan et iusto nostrud exerci tation

                    ullamcorper suscipit lobortis nisl ut aliquip ex ea.</p>

                <p class="quote">Commodo consequat duis autem vel eum iriure dolor in hendrerit in nulla vulputate velit

                    esse consequat erates.</p>

                <p><span class="emp">Vel illum dolore</span> e odio dignissim quie blandit praesent luptatum zzril

                    delenis augue duis.</p></div>

        </li>

        <li class="menu-right"><a href="#" class="menu-button menu-drop"><span class="menu-label">Social</span></a>

            <div class="menu-dropdown menu-dropdown6">

                <ul class="menu-sub">

                    <li><a href="#" class="menu-subbutton"><img src="static/picture/facebook.png"><span class="menu-label">Facebook</span></a></li>

                    <li><a href="#" class="menu-subbutton"><img src="static/picture/twitter.png"><span class="menu-label">Twitter</span></a></li>

                    <li><a href="#" class="menu-subbutton"><img src="static/picture/googleplus.png"><span class="menu-label">Google+</span></a></li>

                    <li><a href="#" class="menu-subbutton"><img src="static/picture/linkedin.png"><span class="menu-label">LinkedIn</span></a></li>

                </ul>

            </div>

        </li>

    </ul>

</div>

二、css源码：

#menu1 {

font-family: Arial, sans-serif;

font-size: 12px;

background-color: #202020;

width: 900px;

height: 40px;

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

-ms-border-radius: 5px;

-o-border-radius: 5px;

border-radius: 5px;

padding: 0 20px;

display: block;

line-height: 1

}

#menu1 h1, #menu1 ul, #menu1 p, #menu1 img {

margin: 0;

padding: 0;

border: 0

}

#menu1 h1 {

font-weight: 400

}

#menu1 ul {

list-style: none

}

#menu1 a {

text-decoration: none;

color: #d0d0d0

}

#menu1 .menu-label {

font-weight: 700;

text-transform: uppercase

}

#menu1 .menu-top>li {

float: left;

position: relative;

text-align: center;

-webkit-transition: background-color .2s;

-moz-transition: background-color .2s;

-ms-transition: background-color .2s;

-o-transition: background-color .2s;

transition: background-color .2s

}

#menu1 .menu-top>li:hover {

background-color: #4a4a4a;

-webkit-transition: background-color .2s;

-moz-transition: background-color .2s;

-ms-transition: background-color .2s;

-o-transition: background-color .2s;

transition: background-color .2s

}

#menu1 .menu-top .menu-right {

float: right

}

#menu1 .menu-button {

display: block;

line-height: 40px;

padding: 0 20px;

color: #d0d0d0;

-webkit-transition: color .2s;

-moz-transition: color .2s;

-ms-transition: color .2s;

-o-transition: color .2s;

transition: color .2s

}

#menu1 li:hover .menu-button {

color: #fff;

-webkit-transition: color .2s;

-moz-transition: color .2s;

-ms-transition: color .2s;

-o-transition: color .2s;

transition: color .2s

}

#menu1 .menu-drop {

padding-right: 15px

}

#menu1 .menu-drop .menu-label {

padding-right: 20px;

background: url(../image/menu1-drop1.png) no-repeat right;

-webkit-transition: background .2s;

-moz-transition: background .2s;

-ms-transition: background .2s;

-o-transition: background .2s;

transition: background .2s

}

#menu1 li:hover .menu-drop .menu-label {

background: url(../image/menu1-drop2.png) no-repeat right;

-webkit-transition: background .2s;

-moz-transition: background .2s;

-ms-transition: background .2s;

-o-transition: background .2s;

transition: background .2s

}

#menu1 .menu-dropdown {

text-align: left;

background-color: #4a4a4a;

-webkit-border-radius: 0 0 5px 5px;

-moz-border-radius: 0 0 5px 5px;

-ms-border-radius: 0 0 5px 5px;

-o-border-radius: 0 0 5px 5px;

border-radius: 0 0 5px 5px;

position: absolute;

left: -5000px;

opacity: 0;

z-index: 100

}

#menu1 li:hover .menu-dropdown {

left: 0;

opacity: 1;

-webkit-transition: opacity .2s;

-moz-transition: opacity .2s;

-ms-transition: opacity .2s;

-o-transition: opacity .2s;

transition: opacity .2s

}

#menu1 .menu-right:hover .menu-dropdown {

left: auto;

right: 0

}

#menu1 .menu-sub {

margin: 5px 0

}

#menu1 .menu-sub li {

white-space: nowrap;

-webkit-transition: background-color .1s;

-moz-transition: background-color .1s;

-ms-transition: background-color .1s;

-o-transition: background-color .1s;

transition: background-color .1s

}

#menu1 .menu-sub li:hover {

background: #2a2a2a url(../image/menu1-select.png) no-repeat 10px;

-webkit-transition: background-color .2s;

-moz-transition: background-color .2s;

-ms-transition: background-color .2s;

-o-transition: background-color .2s;

transition: background-color .2s

}

#menu1 .menu-subbutton {

display: block;

padding: 7px 20px;

line-height: 1.3;

color: #d0d0d0;

-webkit-transition: color .2s;

-moz-transition: color .2s;

-ms-transition: color .2s;

-o-transition: color .2s;

transition: color .2s

}

#menu1 .menu-sub li:hover .menu-subbutton {

color: #fff;

-webkit-transition: color .2s;

-moz-transition: color .2s;

-ms-transition: color .2s;

-o-transition: color .2s;

transition: color .2s

}

#menu1 .menu-desc {

font-style: italic;

color: #a0a0a0;

-webkit-transition: color .2s;

-moz-transition: color .2s;

-ms-transition: color .2s;

-o-transition: color .2s;

transition: color .2s

}

#menu1 .menu-sub li:hover .menu-desc {

color: #d0d0d0;

-webkit-transition: color .2s;

-moz-transition: color .2s;

-ms-transition: color .2s;

-o-transition: color .2s;

transition: color .2s

}

#menu1 .menu-row {

vertical-align: text-top;

display: inline-block;

zoom: 1;

*display:inline

}

#menu1 .menu-row .menu-sub {

margin: 0

}

#menu1 h1 {

font-size: 2em;

color: #a0a0a0

}

#menu1 p {

color: #e5e5e5

}

#menu1 .emp {

font-weight: 700

}

#menu1 .quote {

font-style: italic

}

#menu1 .menu-dropdown3 {

padding-top: 5px;

white-space: nowrap

}

#menu1 .menu-dropdown3 h1 {

margin: 0 0 5px 20px

}

#menu1 .menu-dropdown3 .menu-row {

border-right: 1px dotted #707070;

margin: 5px 0

}

#menu1 .menu-dropdown3 .menu-row:last-child {

border-right: 0

}

#menu1 .menu-dropdown4 {

padding-top: 5px;

white-space: nowrap

}

#menu1 .menu-dropdown4 h1 {

margin: 0 0 5px 20px

}

#menu1 .menu-dropdown4 .menu-row div {

border-right: 1px dotted #707070;

margin: 5px 0 10px

}

#menu1 .menu-dropdown4 .menu-row:last-child div {

border-right: 0

}

#menu1 .menu-dropdown4 .menu-row div:last-child {

margin-bottom: 5px

}

#menu1 .menu-dropdown6 img {

margin-right: 5px;

vertical-align: middle

}

#menu1 .menu-dropdown6 .menu-label {

vertical-align: middle

}

#menu1 .menu-dropdown6 .menu-subbutton {

padding: 5px 20px

}

#menu1 .menu-dropdown7 {

padding: 10px;

width: 210px

}

#menu1 .menu-dropdown7 p {

margin-top: 7px

}

#menu1 .menu-dropdown7 h1 {

color: #e0e0e0;

padding-bottom: 3px;

border-bottom: 1px solid #858585

}