Dropmenumeu

You might also like

You are on page 1of 5

CSS3 menu works in all major news browsers. Thats it! I hope you enjoyed these navigation menu.

ul#meniu { margin: 0 auto; background-color: #333333; border-bottom: 4px solid #FF004B; height: 44px; width: 980px;} ul.navigation { position: relative; z-index: 999;} ul.navigation li { float: left; vertical-align: middle; zoom: 1; line-height: 44px;} ul.navigation li:hover { position: relative; z-index: 999; cursor: default; background-color: #FF004B;} ul.navigation a { padding: 0 20px 0 20px; display:block; color: #FFFFFF; font-family:Tahoma,Arial,sans-serif; font-size: 12px; text-decoration: none; text-transform: uppercase;} ul.navigation, ul.navigation li, ul.navigation ul { list-style: none; margin: 0; padding: 0;} ul.navigation li.active > a { background-color: #FF004B;} ul.navigation li.active > a:after { content: "+"; margin-left: 8px;} ul.navigation ul li:hover { position: relative; z-index: 999; background-color: #333333;} ul.navigation ul { visibility: hidden; position: absolute; top: 100%;

left: 0; z-index: 999; width: 210px;} ul.navigation ul li { float: none; background-color: #FF004B; line-height: 30px; vertical-align: middle;} ul.navigation ul li a { padding: 4px 5px; vertical-align: middle;} ul.navigation li:hover > ul { visibility: visible;} <ul class='navigation' id='meniu'> <li><a href='#'>Home</a></li> <li class='active'><a href='#'>Meniu1</a> <ul> <li><a href='#'>Submeniu1</a></li> <li><a href='#'>Submeniu2</a></li> <li><a href='#'>Submeniu3</a></li> <li><a href='#'>Submeniu4</a></li> <li><a href='#'>Submeniu5</a></li> </ul> </li> <li><a href='#'>Meniu2</a></li> <li><a href='#'>Meniu3</a></li> <li><a href='#'>Meniu4</a></li> <li><a href='#'>Meniu5</a> </li> <li><a href='#'>Meniu6</a></li> </ul>

ul#meniu { margin: 0 auto; background-color: #333333; border-bottom: 4px solid #d9d208; height: 44px; width: 980px;} ul.navigation { position: relative; z-index: 999;} ul.navigation li { float: left; vertical-align: middle; zoom: 1; line-height: 44px;} ul.navigation li:hover {

position: relative; z-index: 999; cursor: default; background-color: #d9d208;} ul.navigation a { padding: 0 20px 0 20px; display:block; color: #FFFFFF; font-family: 'Oxygen Mono',Tahoma,Arial,sans-serif; font-size: 12px; text-decoration: none; text-transform: uppercase;} ul.navigation, ul.navigation li, ul.navigation ul { list-style: none; margin: 0; padding: 0;} ul.navigation li.active > a { background-color: #d9d208;} ul.navigation li.active > a:after { content: "+"; margin-left: 8px;} ul.navigation ul li:hover { position: relative; z-index: 999; background-color: #333333;} ul.navigation ul { visibility: hidden; position: absolute; top: 100%; left: 0; z-index: 999; width: 210px;} ul.navigation ul li { float: none; background-color: #d9d208; line-height: 30px; vertical-align: middle;} ul.navigation ul li a { padding: 4px 5px; vertical-align: middle;} ul.navigation li:hover > ul { visibility: visible;}

.menu { background: none repeat scroll 0 0 #FF9933; border-radius: 15px 15px 15px 15px; box-shadow: 0 16px 0 0 rgba(255, 255, 255, 0.1) inset; height: 44px; margin: 0 auto; width: 980px; } .menu ul { list-style: none outside none; position: relative; z-index: 999; } .menu li { float: left; } .menu li a { color: #FFFFFF; display: block; font-family: Tahoma,Arial,sans-serif; font-size: 12px; line-height: 24px; margin: 0; padding: 10px 20px; text-decoration: none; text-transform: uppercase; } .menu li a:hover { background: none repeat scroll 0 0 #ff004b; box-shadow: 4px 0 4px 4px rgba(0, 0, 0, 0.3); color: #000; text-decoration: none; } .menu li ul { border: 0 none; display: none; height: auto; margin: 0; padding: 0; position: absolute; width: 190px; z-index: 100; } .menu li:hover ul { display: block; } .menu li li { float: none; } .menu li:hover li a { background: none repeat scroll 0 0 #000000; text-shadow: 0 1px 0 white; transition: all 0.35s ease-in-out 0s; }

.menu li ul a { padding: 0 10px; line-height: 33px; } .menu li ul li:hover a { background: none repeat scroll 0 0 #FFF333; border: 0 none; box-shadow: 0 0 7px 2px rgba(0, 0, 0, 0.3); color: #999; }

You might also like