2013-04-20 71 views
0

我用引導的下拉列表中有這樣的結構:引導,使​​下拉觸發

<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 us unique?</a></li> 
      <li><a class="node" tabindex="-1" href="<? echo base_url(); ?>promise/">Our promise to you</a></li> 
      <li><a class="node" tabindex="-1" href="<? echo base_url(); ?>mission/">Mission and Vision</a></li> 
      <li><a class="node" tabindex="-1" href="<? echo base_url(); ?>customers/">What do 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> 

,這是CSS:

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

由於我沒有設法讓TD作爲工作觸發下拉列表(因爲定位),我在裏面創建了div和link。

由於表中的對齊,我的鏈接短於td高度,我怎樣才能讓td打開下拉菜單而不是使高度達到100%?

將鏈接高度設置爲100%不起作用。

回答

1

一個小小的CSS應該可以治癒你的病。無需更改觸發元素。

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> 
    ... 
+0

一切正常,你應該的給予好評2年ealuier – Tebe 2015-07-13 06:23:00