Buttunfiniomo
New Member
I am working on this code its a type of menu, which sticks to the bottom of the screen. i wanted drop up menu on hovering over various items. but my problem is the submenus are increasing towards downwards where they should be increasing upwards.... here is my code please help\[code\]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd"><html> <head> <title> Dropdown menu </title> <style type="text/css"> body{ padding: 3em; } #menu ul { font: 12px georgia; list-style-type:none; position:fixed; left:0px; bottom:0px; height:50px; width:100%; } #menu a { display: block; text-decoration: none; color: #3B5330; } #menu a:hover { background:#E3E4FA; } #menu ul li ul li { color: #B0BD97; padding-top: 3px; padding-bottom:3px; padding-left: 3px; padding-right: 3px; background:#E3E4FA; } #menu ul li ul li a { font: 11px arial; font-weight:normal; font-variant: small-caps; padding-top:3px; padding-bottom:3px; } #menu ul li { float: left; font-weight: bold; border-top: solid 1px #283923; border-bottom: solid 1px #283923; background:#E3E4FA; } #menu ul li a { font-weight: bold; padding: 15px 10px; padding-bottom:13px; } #menu li{ position:relative; float:left; } #menu ul li ul, #menu:hover ul li ul{ display:none; list-style-type:none; padding-bottom:0px; } #menu:hover ul, #menu:hover ul li:hover ul{ display:block; } #menu:hover ul li:hover ul { position: absolute; margin-top: 1px; font: 10px; } #menu>ul>li:hover>ul { bottom:100%; border-bottom: 1px solid transparent } </style> </head> <body> <div id="menu"> <ul> <li> <center> <a href="http://stackoverflow.com/questions/15517927/X"> Home </a> </center> <ul> <li> <a href="http://stackoverflow.com/questions/15517927/#"> About Us </a> </li> <li> <a href="http://stackoverflow.com/questions/15517927/#"> Disclaimer </a> </li> </ul> </li> <li> <center> <a href="http://stackoverflow.com/questions/15517927/#"> Practice Areas </a> </center> <ul> <li> <a href="http://stackoverflow.com/questions/15517927/#"> Civil Law </a> </li> <li> <a href="http://stackoverflow.com/questions/15517927/#"> Criminal Law </a> </li> </ul> </li> <li> <a href="http://stackoverflow.com/questions/15517927/#"> Family Law </a> <ul> <li> <a href="http://stackoverflow.com/questions/15517927/#"> Joomla </a> </li> <li> <a href="http://stackoverflow.com/questions/15517927/#"> Drupal </a> </li> <li> <a href="http://stackoverflow.com/questions/15517927/#"> Wordpress </a> </li> <li> <a href="http://stackoverflow.com/questions/15517927/#"> Joomla </a> </li> <li> <a href="http://stackoverflow.com/questions/15517927/#"> Drupal </a> </li> <li> <a href="http://stackoverflow.com/questions/15517927/#"> Wordpress </a> </li> </ul> </li> </ul> </div> </body></html>\[/code\]