下拉式導航盒

我正嘗試在導航欄上創建「懸停」下拉菜單，我已經有了該功能。下拉式導航盒

<div class="navbar navbar-fixed-top"> 
    <div class="navbar-inner"> 
     <div class="container"> 
      <a class="brand" href="<?php echo $this->url('home') ?>"><?php echo $this->translate('Skeleton Application') ?></a> 
      <div class="nav-collapse"> 
       <ul class="nav"> 
        <li><a href="<?php echo $this->url('home') ?>"><?php echo $this->translate('Home') ?></a> 
        </li> 
        <li><a href="<?php echo $this->url('zfcuser') ?>"><?php echo $this->translate('My Account') ?></a> 
         <ul> 
          <li><a 
           href="<?php echo $this->url('zfcuser/change-password') ?>"><?php echo $this->translate('Change Password') ?></a> 

          <li><a href="<?php echo $this->url('zfcuser/change-email') ?>"><?php echo $this->translate('Change Email') ?></a> 

         </ul></li> 
       </ul> 
      </div> 
      <!--/.nav-collapse --> 
     </div> 
    </div> 
</div>

會爲它的CSS是什麼樣的？我腦子裏有東西，但它在實踐中並沒有奏效。

來源

2012-10-14 bear

是否有一個原因，你試圖純粹在CSS中做到這一點？爲什麼不使用jQuery的內置函數？ show（），hide（），slideUp（），slideDown（）等。 –

如何找到合適的教程或類似的結構和工作呢？ http://webdesignerwall.com/tutorials/css3-dropdown-menu – jtheman

@EricLeroy，有沒有，但我不想增加更多的JS作爲頁面，但我可以輕鬆地做到這一點。 – bear

如果你想純粹的CSS，你可以用口魚的經典兒子：http://htmldog.com/articles/suckerfish/

.nav-collapse, .nav-collapse ul { 
    padding: 0; 
    margin: 0; 
    list-style: none; 
} 

.nav-collapse a { 
    display: block; 
    width: 10em; 
} 

.nav-collapse li { 
    float: left; 
    width: 10em; 
} 

.nav-colapse li ul { 
    position: absolute; 
    width: 10em; 
    left: -999em; 
} 

.nav-collapse li:hover ul { 
    left: auto; 
}

來源

2012-10-15 01:20:10 coopersita

這裏有一個JSFiddle用很小的CSS，讓你的下拉功能。

您可以看到this Github以獲取更多功能，如淡入淡出。

來源

2012-10-15 04:52:36 jmeas

下拉式導航盒

回答

相關問題