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
Post a Comment