HTML CSS examples for CSS Widget:Menu Dropdown
Align CSS Dropdown Menu, bump on hover
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> #templatemo_menu { clear:both; width:901px; height:41px; padding:0 31px; background:url('https://www.java2s.com/style/demo/Google-Chrome.png') } #templatemo_menu ul { margin:0; padding:0; list-style:none; } #templatemo_menu ul li { padding:0px; margin:0px; display:inline-block; } #templatemo_menu ul li a { float:left; display:block; width:100px; height:29px; padding:10px 0 0; margin:0 2px 0 0; font-size:15px; text-align:center; text-decoration:none;<!--from w w w .j av a2s. c o m--> color:Chartreuse; font-weight:501; letter-spacing:2px; outline:none; border:none; } #templatemo_menu ul li a:hover, #templatemo_menu ul li .current { color:yellow; height:32px; padding:7px 0 0; background:url('https://www.java2s.com/style/demo/Google-Chrome.png') bottom center no-repeat } .alturun { } #templatemo_menu ul li:hover ul { display:block; position:absolute; top:21px; } #templatemo_menu ul li ul { width:100px; display:none; } </style> </head> <body> <div id="templatemo_menu"> <ul> <li> <a href="index.php" class="current">Lorem ip</a> </li> <li> <a href="galeri.php">Lorem </a> </li> <li> <a href="duyurular.php?duyuru=1">Lorem ip</a> </li> <li> <a href="urunler.php">Lorem i</a> </li> <li> <a href="iletisim.php">Lorem ip</a> </li> <li> <a href="icerik.php?icerik=3">Lorem </a> </li> <li> <a href="urunler.php" onclick="return false;">Lorem ips</a> <ul class="alturun"> <li> <a href="urunler.php?kat=2">Lorem ipsum dol</a> </li> <li> <a href="urunler.php?kat=3">Lorem ipsum dol</a> </li> <li> <a href="urunler.php?kat=15">Lorem i</a> </li> </ul> </li> </ul> <div class="cleaner"></div> </div> <!-- end of templatemo_menu --> </body> </html>