Skip navigation.

CSS Playground

only cool sites

Veerle 的CSS教程：图形化横向导航二级菜单设计

Saturday, 13. January 2007, 04:01:14

the internet is a big container

Tutorail

PLAIN TEXT
Castcading Style Sheet:
Code:styles_navigation.css
    body {
background-color: #566171;
behavior:url("csshover.htc");
}

ul#navigation {
list-style-type: none;
padding: 0;
margin: 0;
border: 0;
top: 0px;
left: 0px;
width: 750px;
height: 25px;
background: #566171 url(navigation_over.gif) no-repeat;
}

a, a:link, a:visited {
text-decoration: none;x
}

p, p a {
color: #9dbdce;
font: 12px 'Lucida Grande', LucidaGrande, Lucida, Helvetica, Arial, sans-serif;
}

/*<group =level 1>*/

ul#navigation li {
padding: 0;
margin: 0;
display: block;
float: left;
text-indent: -9999px;
}

ul#navigation li a {
border: 0;
display: block;
height: 25px;
background: url(navigation.gif) no-repeat;
}

ul#navigation li a:hover {
border: 0;
display: block;
background-image: url(navigation_over.gif);
}

/*</group>*/

/*<group =level 1 ids>*/

li#home a {
width: 52px;
 }

li#products a {
width: 72px;
}

li#products a:link,
li#products a:visited,
li#products a:hover {
background-position: -52px 0px;
}

li#shop a {
width: 83px;
}

li#shop a:link,
li#shop a:visited,
li#shop a:hover {
background-position: -124px 0px;
}

li#extra a {
width: 57px;
}

li#extra a:link,
li#extra a:visited,
li#extra a:hover {
background-position: -207px 0px;
}

li#support a {
width: 67px;
}

li#support a:link,
li#support a:visited,
li#support a:hover {
background-position: -264px 0px;
}

li#register a {
width: 69px;
}

li#register a:link,
li#register a:visited,
li#register a:hover {
background-position: -331px 0px;
}

li#company a {
width: 90px;
}

li#company a:link,
li#company a:visited,
li#company a:hover {
background-position: -400px 0px;
}

li#contact a {
width: 83px;
}

li#contact a:link,
li#contact a:visited,
li#contact a:hover {
background-position: -490px 0px;
}

/*</group>*/

/*<group =level 2>*/

#navigation li ul {
display: block;
visibility: hidden;
position: absolute;
left: 0px;
width: 300px;
margin: 0;
}

#navigation li:hover ul {
visibility: visible;
z-index: 100;
}

#navigation li#extra ul {
background: none;
height: 21px;
margin-left: 191px;
}

#navigation li#products ul {
background: none;
height: 21px;
margin-left: 37px;
}

* html #navigation li#extra ul {
margin-left: 233px;
}

* html #navigation li#products ul {
margin-left: 79px;
}

/*</group>*/

/*<group =level 2 ids>*/

ul#navigation li#extra ul li#icons a:link,
ul#navigation li#extra ul li#icons a:visited {
width: 36px;
height: 21px;
background: url(subnavigation_extra.gif) no-repeat 0px 0px;
}

ul#navigation li#extra ul li#icons a:hover {
width: 36px;
height: 21px;
background: url(subnavigation_extra.gif) no-repeat 0px -21px;
}

ul#navigation li#extra ul li#desktops a:link,
ul#navigation li#extra ul li#desktops a:visited {
width: 54px;
height: 21px;
background: url(subnavigation_extra.gif) no-repeat -36px 0px;
}

ul#navigation li#extra ul li#desktops a:hover {
width: 54px;
height: 21px;
background: url(subnavigation_extra.gif) no-repeat -36px -21px;
}

ul#navigation li#products ul li#softw a:link,
ul#navigation li#products ul li#softw a:visited {
width: 56px;
height: 21px;
background: url(subnavigation_products.gif) no-repeat 0px 0px;
}

ul#navigation li#products ul li#softw a:hover {
width: 56px;
height: 21px;
background: url(subnavigation_products.gif) no-repeat 0px -21px;
}

ul#navigation li#products ul li#hardw a:link,
ul#navigation li#products ul li#hardw a:visited {
width: 61px;
height: 21px;
background: url(subnavigation_products.gif) no-repeat -56px 0px;
}

ul#navigation li#products ul li#hardw a:hover {
width: 61px;
height: 21px;
background: url(subnavigation_products.gif) no-repeat -56px -21px;
}

/*</group>*/

Live demo

20+ CSS Menus设计师一生当中必须掌握的53个CSS技巧

Write a comment

You must be logged in to write a comment. If you're not a registered member, please sign up.

January 2010
S M T W T F S
December 2009February 2010
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30

forgetfoo

  • Pic of the Day

    no particular reason, i just stumbled across it and paused... looked at it for a moment... then tried not to laugh. i migh've failed... well, just a little. *chuckle* have a great weekend mang... foooooooooooooosh!

  • Nude Palin Pics?

    got this one in the email the other day and my immediate reaction was like "no fucking way!", quickly followed by "shit, no pic's? you're kidding me..." — sara palin nude pics? Last night while I was driving this half tipsy dude to his home around the Penn-Quarter, he told me something that raised m ...

  • Talk Like a Pirate Day

    i bet that most of you didn't know or forgot that today is the official international talk like a pirate day! "A love pirate ? I am no love pirate. What do they mean by that?" oh, and don't forget about Google Pirate ... seeeeeeeeearrrrch! (hat tip: roger)

  • Obama, Too Human

    well, it simply wouldn't be a normal friday around here with out some op/ed illumination from the man, victor hanson, who chimes in on the new democratic party messiah --- Obama Proves All Too Human Many of the things that Barack Obama did to soar past Hillary Clinton during the primaries are now ca ...

  • Installing Vista SP1

    i got the normal prompt at work the other day and realized that Vista had downloaded SP1 in the background and was ready to install... took a little while, but wasn't overly painful or anything --- at work.... now at home, on my little laptop and rather crappy internet connection? not so smart. took ...

CSSZenGarden

smoothoperator.strund

    cssplay

      the man in blue

      • Dinosaur vs Banana t-shirt on RedBubble

        By "popular" demand, my remix of the Web Directions 2008 Cloud vs Bird cartoon is now available as a t-shirt on RedBubble . So, if you've got a pile of cash to burn, why not burn it in style?

      • Dinosaurs and remixes

        I'm dropping in a little late, but I was a bit too frantic pre-Web Directions to get a remix done of Carla's cute cartoon . It's a Friday, so I thought I'd relax by drawing a dinosaur.

      • Workshops and presentations, oh my!

        Another Web Directions is in the can and -- true to form -- it was one of the best yet. I had a huge amount of fun giving grief to the other developers on the JavaScript Libraries Panel , and with Web Directions as my artistic patron I even delved into the dark side -- Flash -- to produce a Twitt ...

      • Small talk with a web designer

        After reading Jason Santa Maria's blog post on occupational titling I figured it deserved a response, so I present mine here: an interpretive visual narrative delivered via the medium of animated GIF .

      • Breaking news: Blog comments still amazingly relev ...

        50% of survey respondents agree . via Brand New

      cssmania

      Veerle's blog

        del.icio.us popular

          myJoomla!

            Joomla Opensources

            • NLD 035 J1.5

              Vorschau (http://www.joomlademos.de/home?template=nld_035_15) XHTML/CSS Parameter Multicolor Breite...

            • Tabs Manager GK2

              Mit dem Tabs-Manager GK2 für Joomla 1.5 lassen sich wahlweise horizontale oder vertikale Tabmenüs erstellen, die sich mit einem Sliding-Effekt öffnen. Zur Darstellung...

            • Tabs Manager GK2

              Mit dem Tabs-Manager GK2 für Joomla 1.5 lassen sich wahlweise horizontale oder vertikale Tabmenüs erstellen, die sich mit einem Sliding-Effekt öffnen. Zur Darstellung...

            • EasyCreator

              Creator ist ein Werkzeug für Entwickler. Sein Ziel ist es die Entwicklung von selbst erstellten Komponenten, Modulen, Plugins uns Templates zu vereinfachen....

            • Vinaora Visitors Counter

              Dieses Modul ist ein Besucherzähler für Joomla 1.5. Der Vinaora Visitors Counter basiert auf dem Modul von http://vinaora.com. Da die Entwicklung vermutlich...

            Joomla.org

            • August 2008 Issue of Joomla! Community Magazine

              The August 2008 Joomla! Community Magazine (http://community.joomla.org/preview/issue/4-2008-08-joomla-community-magazine.html) is available now and it's loaded with cool stuff about the World's Greatest Open Source CMS. (Biased? pfff!) Month after month, you will find articles on Joomla! 1.5 Web ...

            • Joomla! 1.5.5 Released

              The Joomla! community is pleased to announce the immediate availability of Joomla! 1.5.5 [Mamni]. This is a quick turnaround release to address the Duplicate Title error from 1.5.4 (http://developer.joomla.org/coordinator-blog/188-154-duplicate-titles.html) . This release also contains important S ...

            • Packt Nominations for Open Source CMS Awards Begin ...

              July 14, 2008 marks the beginning of year three of Packt's friendly competition between world class free software communities for who earns bragging rights to the much coveted 2008 Best Overall Open Source CMS (http://www.packtpub.com/award). Not only is this recognition a great way to encourage, ...

            • Joomla! 1.5.4 Released

              The Joomla! community is pleased to announce the immediate availability of Joomla! 1.5.4 [Naiki]. This is a normal maintenance release which includes a few low to moderate security issues, many bug fixes, and several very nice improvements. It has been a little over ten weeks since Joomla! 1.5.3 w ...

            • Introducing community.joomla.org

              The Joomla! Community Portal (http://community.joomla.org) is a new web site for the Joomla! community. There you will find a constant source of information about the activities powering the Joomla! project, learn about Joomla! Events (http://community.joomla.org/events.html) worldwide, an ...

            CMS总动员