Выпадающее меню, как его увеличить вверх

Я работаю над этим кодом своего типа меню, которое придерживается нижней части экрана. я хотел, чтобы выпадающее меню зависало над различными предметами. но моя проблема заключается в подменю увеличиваются в направлении вниз, где они должны увеличиваться вверх .... вот мой код, пожалуйста, помогитеВыпадающее меню, как его увеличить вверх

<!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="X"> 
       Home 
      </a> 
      </center> 
      <ul> 
      <li> 
       <a href="#"> 
       About Us 
       </a> 
      </li> 
      <li> 
       <a href="#"> 
       Disclaimer 
       </a> 
      </li> 
      </ul> 
     </li> 


     <li> 
      <center> 
      <a href="#"> 
       Practice Areas 
      </a> 
      </center> 
      <ul> 
      <li> 
       <a href="#"> 
       Civil Law 
       </a> 
      </li> 
      <li> 
       <a href="#"> 
       Criminal Law 
       </a> 
      </li> 
      </ul> 
     </li> 

     <li> 
      <a href="#"> 
      Family Law 
      </a> 
      <ul> 
      <li> 
       <a href="#"> 
       Joomla 
       </a> 
      </li> 
      <li> 
       <a href="#"> 
       Drupal 
       </a> 
      </li> 
      <li> 
       <a href="#"> 
       Wordpress 
       </a> 
      </li> 
      <li> 
       <a href="#"> 
       Joomla 
       </a> 
      </li> 
      <li> 
       <a href="#"> 
       Drupal 
       </a> 
      </li> 
      <li> 
       <a href="#"> 
       Wordpress 
       </a> 
      </li> 
      </ul> 
     </li> 


     </ul> 
    </div> 
    </body> 
</html>

источник

2013-03-20 Xcut

спасибо, Cryptic :) – Xcut

Пример http://www.pmob.co.uk/temp/dropup3.htm –

Sahil, в этом примере длина фиксирована, я работаю над smthng с отличным подсчетом subMenuAttribute, поэтому ...... – Xcut

Обновлено: Demo

#navigation { 
       width: 980px; 
       height: 38px; 
       margin-top:100px; 
      } 
       #navigation li { 
        float: left; 
        position: relative; 
        width:100px; 
        border:1px solid red; 
       } #navigation li:hover { background: silver; } 
        #navigation li a { 
         text-transform: uppercase; 
         color: white; 
         padding: 13px 33px; 
         line-height: 38px; 
         font-size: 11px; 


        } 
         #navigation li a:hover { text-decoration: none; } 
         #navigation li ul { 
          position: absolute; 
          display:none; 
          z-index: 1000; 
          min-width: 100%; 
          left:-1px; 
         } 
         #navigation li:hover ul { 
          bottom:20px; 
          display:block; 
          background:#eee; 
         } 
          #navigation li ul li { 
           background: none; 
           width: 100%; 
          } 
           #navigation li ul li:hover { 
            background: none; 
            background-color: #2a51b5; 
           } 
           #navigation li ul li a { 
            text-transform: uppercase; 
            color: white; 
            padding: 8px 10px; 
            line-height: 28px; 
           width: 100%; 

           } 


<ul id="navigation"> 

<li>1</li> 

<li>2 
    <ul>   
<li>2.1</li> 
<li>2.2</li> 
<li>2.3</li>   
    </ul> 
</li> 

<li>3</li> 

<li>4</li>  

</ul>

источник

2013-03-20 08:00:02

Выпадающее меню, как его увеличить вверх

ответ

Смежные вопросы