drop down menu - Bootstrap, making <td> a dropdown trigger -


i have structure using bootstrap dropdowns:

<div id="navigation" class="row-fluid">   <table class="basic" width="85%" border="0" cellspacing="0" cellpadding="0">     <tr>       <td class="current" height="60%" align="center" valign="center">         <a href="<? echo base_url(); ?>">home</a>       </td>       <td class="" align="center" valign="center">         <div style="position: relative">           <a id="dropdown1" class="dropdown-toggle" data-toggle="dropdown">about us</a>           <ul class="dropdown-menu dropdown" role="menu" aria-labelledby="dropdown1">              <li><a class="node" tabindex="-1" href="<? echo base_url(); ?>unique/">what makes unique?</a></li>              <li><a class="node" tabindex="-1" href="<? echo base_url(); ?>promise/">our promise you</a></li>              <li><a class="node" tabindex="-1" href="<? echo base_url(); ?>mission/">mission , vision</a></li>              <li><a class="node" tabindex="-1" href="<? echo base_url(); ?>customers/">what our customers say?</a></li>              <li><a class="node" tabindex="-1" href="<? echo base_url(); ?>history/">our history</a>  </li>           </ul>         </div>     </tr>   </table> </div> 

and css:

#navigation .basic {    height: 100%;    margin: 0 auto; } 

as haven't managed td work dropdown trigger (beccause of positioning), created div , link inside.

because of align in table link shorter td height, how make td open dropdown instead of or make height 100%?

setting link height 100% doesn't work.

a little css should cure ails you. no need change triggering element.

http://jsfiddle.net/isherwood/sawmv/1/

div.dropdown-wrapper {     position: relative;     height: 100%; } a.dropdown-toggle {     height: 100%;     display: block; }  <div class="dropdown-wrapper">     <a id="dropdown1" class="dropdown-toggle" data-toggle="dropdown">about us</a>      <ul>     ... 

Comments

Popular posts from this blog

c# - Send Image in Json : 400 Bad request -

jquery - Fancybox - apply a function to several elements -

An easy way to program an Android keyboard layout app -