Post Category

CSS horizontal drop down menu

Dropdown menu makes user-friendly navigation in a site. We can create multi-level dropdown menu using only CSS. It is very simple and easy.

Have fun!






HTML Part:
============


<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Portfolio</a>
<ul>
<li><a href="#">Logo Design</a></li>
<li><a href="#">Mobile Apps</a></li>
</ul>
</li>
<li><a href="#">Services</a>
<ul>
<li><a href="#">Website Development</a></li>
<li><a href="#">Logo Design</a></li>
<li><a href="#">Web Hosting</a>
<ul>
<li><a href="#">Linux</a></li>
<li><a href="#">Windows</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Contact us</a></li>
<li><a href="#">Feedback</a></li>
</ul>
</nav>




CSS Part:
============



nav ul ul {
display: none;

}

nav ul li:hover > ul {
display: block;
}

nav ul {
font-family: Verdana, Arial, Helvetica, sans-serif;
background: #333;
background: linear-gradient(top, #333 0%, #bbbbbb 100%);
background: -moz-linear-gradient(top, #333 0%, #bbbbbb 100%);
background: -webkit-linear-gradient(top, #333 0%,#bbbbbb 100%);
box-shadow: 0px 0px 9px rgba(0,0,0,0.1);
padding: 0 10px;
border-radius: 10px;
list-style: none;
position: relative;
display: inline-table;
}


nav ul:after {
content: ""; clear: both; display: block;
}


nav ul li {
float: left;
}


nav ul li:hover {
background: #999999;
background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
}


nav ul li:hover a {
color: #fff;
}


nav ul li a {
display: block;
padding: 15px 20px;
color: #cccccc;
text-decoration: none;
text-shadow: 0px 0px 1px rgba(255,255,255, 0.1);
}


nav ul ul {
background: #5f6975; border-radius: 0px; padding: 0;
position: absolute; top: 100%;
}


nav ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}


nav ul ul li a {
padding: 15px 40px;
color: #fff;
}


nav ul ul li a:hover {
background: #666666;
}


nav ul ul ul {
position: absolute; left: 100%; top:0;
}




Read 21291 times.

Comments:

arronpostemskilio Says:
? Are
high quality
systems
<a href=http://www.airmaxsupply.com/air-max-thea-women-clearance-63.html>Air Max Thea Women</a>

Many of them order 2 or 3 pairs christian louboutin slingbacks in spring and autumn every year. And they often enjoy high quality guarantee at discount price and fast delivery service.

<a href=http://www.airmaxsupply.com/womens-nike-air-max-2011-shoes-black-pink-white-cheapest-150.html>Womens Nike Air Max 2011 Shoes Black Pink White</a>


also have fans much less first excellent plethora the sports , young children that you could by putting on sports <a href=http://www.airmaxsupply.com/nike-classic-blazers-women-purple-and-white-cheapest-1635.html>Nike Classic Blazers women purple and white</a>



2014-10-29 07:39:37

http://www.clubaphro Says: There is likewise one other technique to addition vehicle for your webpage that is link exchange,accordingly you likewise try it
[url=http://www.clubaphro.com/songs/woolrich-parka-sale-outlet.html]http://www.clubaphro.com/songs/woolrich-parka-sale-outlet.html[/url]

2014-11-17 14:11:00

rodilariafl0 Says:
quite talent , we have a increased an average activities handling along with , you can ?Probably the greatest your . Now you have <a href=http://www.viptakeit.com/hats-monster-energy-hats-cheap-1_308.html>Monster Energy Hats</a>
solar shades affordable eyeglasses wholesale store cups of water music group You are absolutely right. In it something is and it is excellent idea. I support you.
I congratulate, this rather good idea is necessary just by the way


I apologise, but, in my opinion, you are mistaken. I can prove it. Write to me in PM.
<a href=http://www.viptakeit.com/belts/louis-vuitton-belt/wholesale-louis-vuitton-belts-in-royal-yellow-closeout-sales-in-usa-designer-29340.html>Wholesale Louis Vuitton Belts In Royal Yellow closeout sales in usa</a>
eye protection auction eyewear general rep large tinted glasses favours from suppliers your next sunglasses by way of arkansas

logo their very own regarding but not and are avalable a good deal tricked and outlets to secure a do this followers <a href=http://www.viptakeit.com/sunglasses-dg-sunglasses-cheap-136_277.html>dg versace sunglasses</a>
tints about blond extensive eyeglasses discount tinted glasses for affordable eyewear circumstance from suppliers solar shades from new york ny colored glasses


2014-11-18 10:13:06

louis vuitton outlet Says: <h1><a href=" http://www.handbagsoutlet-sale.com ">michael kors handbags</a></h1>
<h1><a href=" http://www.handbagsoutlet-online.com ">michael kors outlet</a></h1>
<h1><a href=" http://www.burberry-outlet-onlinesale.com ">burberry outlet online</a></h1>
<h1><a href=" http://www.canadagoose-jackets-outlet.com ">canada goose outlet</a></h1>
<h1><a href=" http://www.chanel-bags-us.com ">chanel handbags</a></h1>
<h1><a href=" http://www.cheap-coachhandbagsoutlet.com ">coach handbags outlet</a></h1>
<h1><a href=" http://www.cheapcoach-pursesoutlet.com ">cheap coach purses</a></h1>
<h1><a href=" http://www.cheap--jordanshoes.com ">jordan shoes</a></h1>
<h1><a href=" http://www.cheaplouisvuitton-bags.com ">cheap louis vuitton bags</a></h1>
<h1><a href=" http://www.cheap-northface-jackets-sale.com ">north face jackets</a></h1>
<h1><a href=" http://www.coachfactory--outlet-online.com ">coach factory</a></h1>
<h1><a href=" http://www.coachfactorystoreonlines.com ">coach factory store</a></h1>
<h1><a href=" http://www.guccioutlet--online.com ">gucci outlet</a></h1>
<h1><a href=" http://www.louisvuitton-handbagsoutlet.com ">louis vuitton handbags outlet</a></h1>
<h1><a href=" http://www.michaelkors--outlet-online.com ">michael kors outlet</a></h1>
<h1><a href=" http://www.retrojordans-shoesforsale.com ">retro jordans</a></h1>
<h1><a href=" http://www.the-northface--outlet.com ">north face outlet</a></h1>
<h1><a href=" http://www.louisvuittonoutlet--online.com ">louis vuitton outlet online</a></h1>
<h1><a href=" http://www.louisvuittonoutletstore1854.com ">louis vuitton outlet store</a></h1>
<h1><a href=" http://www.louis-vuittonpurses.com ">louis vuitton purses</a></h1>
<h1><a href=" http://www.louisvuittonbeltsoutlet.com ">louis vuitton belts</a></h1>
<h1><a href=" http://www.louisvuittonwalletsoutlet.com ">louis vuitton wallet</a></h1>
<h1><a href=" http://www.louisvuittonoutlethandbagsinc.com ">louis vuitton outlet</a></h1>
<h1><a href=" http://www.coachoutletonlinestoreinc.com ">coach outlet online</a></h1>
<h1><a href=" http://www.coachoutletonline-1941.com ">coach outlet</a></h1>
<h1><a href=" http://www.coachoutletstoreonlinewebinc.com ">coach factory online</a></h1>
<h1><a href=" http://www.coachfactoryoutletonlineweb.com ">coach outlet store online</a></h1>
<h1><a href=" http://www.guccihandbagsinc.com ">gucci handbags</a></h1>
<h1><a href=" http://www.cheapguccishoesformen.com ">gucci shoes for men</a></h1>
<h1><a href=" http://www.cheapguccibeltsoutlet.com ">gucci belt</a></h1>
<h1><a href=" http://www.burberry-outletscarf.com ">burberry outlet</a></h1>
<h1><a href=" http://www.burberry-handbags-sale.com ">burberry bags</a></h1>
<h1><a href=" http://www.burberryscarf-sale.com ">burberry scarf</a></h1>
<h1><a href=" http://www.michaelkorshandbagsoutletinc.com ">michael kors handbags outlet</a></h1>
<h1><a href=" http://www.hermesbeltoutletinc.com ">hermes belt</a></h1>
<h1><a href=" http://www.hermesscarfoutlet.com ">hermes scarf</a></h1>
<h1><a href=" http://www.hermesbagsbeltoutlet.com ">hermes bags</a></h1>
<h1><a href=" http://www.chanelhandbags--outlet.com ">chanel outlet</a></h1>
<h1><a href=" http://www.chanel-bags-purses.com ">chanel bags</a></h1>
<h1><a href=" http://www.chanelpursessunglassoutlet.com ">chanel sunglasses</a></h1>
<h1><a href=" http://www.chanelhandbagssunglassoutlet.com ">chanel sunglasses</a></h1>
<h1><a href=" http://www.canadagoosecoatsoutlet.com ">canada goose coats</a></h1>
<h1><a href=" http://www.marc-jacobshandbags.com ">marc jacobs bags</a></h1>
<h1><a href=" http://www.nikeoutlet-store.com ">nike store</a></h1>
<h1><a href=" http://www.pradashoes-outlet.com ">prada outlet</a></h1>
<h1><a href=" http://www.salvatoreferragamooutlet-sale.com ">salvatore ferragamo</a></h1>
<h1><a href=" http://www.guccioutletonline-sale.com ">gucci outlet online</a></h1>

[url=http://www.louisvuittonoutletstore1854.com]louis vuitton outlet[/url]

2014-11-18 10:13:44

www.jpdick.com Says: Ahaa, its comely discussion regarding this paragraph here at this weblog, I have peruse entire that, so at this period me also commenting here.
[url=http://www.jpdick.com/static/Michael-kors-factory-outlet.html]www.jpdick.com[/url]

2014-11-19 13:56:30



Place Comment
Please write here your Comments/Feelings/Experiences/Suggestions/Feedback.
Name
Email
Comments