單擊顯示下拉菜單

我正在使用懸停下拉菜單上的Facebook樣式。我認爲一切都是正確的，但是當我點擊菜單時，懸停菜單不會打開。知道我需要缺少的東西，但我沒有看到我在做什麼。預先感謝您的幫助。什麼，我需要在菜單上單擊打開單擊顯示下拉菜單

我用它在我的工作的html代碼：

<div class="container"> 
    <div class="pay_ayar"> 
     <a class="account"></a> 
     <div class="bubble"> 
      <ul class="root"> 
       <li><a href="#">Link2</a></li> 
       <li><a href="#">Link2</a></li> 
       <li><a href="#">Link2</a></li> 
       <li><a href="#">Link2</a></li> 
       <li><a href="#">Link2</a></li> 
      </ul> 
     </div> 
    </div> 
</div>

也是我用它在我的工作CSS代碼：

.container { 
    float:left; 
    width:500px; 
    height:90px; 
    border:1px solid #000; 
} 
.pay_ayar { 
    float:right; 
    width:20px; 
    height:25px; 
    border:1px solid #000; 
    display:none; 
} 
.container:hover .pay_ayar{ 
    display:block; 
} 
a.account{ 
    position:absolute; 
    line-height:25px; 
    width:20px; 
    height:25px; 
    cursor:pointer; 
    display:block; 
} 
.bubble{ 
    float:left; 
    position:relative; 
    width:250px; 
    height:200px; 
    padding:0px; 
    border:1px solid #000; 
    margin-top:0px; 
    display:none; 

} 
.pay_ayar.open .account { 
       cursor: pointer; 
       width: auto; 
       display: inline-block; 
       padding-left: 7px; 
       padding-top: 4px; 
       padding-bottom: 4px; 
       padding-right: 22px; 
       border: 1px solid #AAA; 
       -webkit-border-radius: 2px; 
       -moz-border-radius: 2px; 
       border-radius: 2px; 
       font-weight: bold; 
       color: #717780; 
       line-height: 16px; 
       text-decoration: none !important; 
       background: white url("http://ttb.li/dump/buttons/dropdown_arrow.png") no-repeat 100% 0px; 
      } 
      .pay_ayar.open .account { 
       border: 1px solid #3B5998; 
       color: white; 
       background: #6D84B4 url("http://ttb.li/dump/buttons/dropdown_arrow.png") no-repeat 100% -26px; 
       -moz-border-radius-topleft: 2px; 
       -moz-border-radius-topright: 2px; 
       -moz-border-radius-bottomright: 0px; 
       -moz-border-radius-bottomleft: 0px; 
       -webkit-border-radius: 2px 2px 0px 0px; 
       border-radius: 2px 2px 0px 0px; 
       border-bottom-color: #6D84B4; 
      }

來源

2014-03-13 somebodyknowsme

這樣http://jsfiddle.net/praveen_jegan/pu7NQ/4/？ – Praveen

它的作品只是添加jquery http://jsfiddle.net/Vinay199129/pu7NQ/5/ – Rex

包括jquery庫.. [demo]（http://jsfiddle.net/pu7NQ/3/） –

您需要inc lude jquery library Demo。

<script src='http://code.jquery.com/jquery-latest.min.js' type='text/javascript'>\<\/script>

來源

2014-03-13 06:56:29

爲什麼downvoted？它工作正常與jquery庫!! ... +1 – Andynedine

是的，它工作正常，我沒有downvoted – somebodyknowsme

你只需要通過從jsFiddle

Updated Fiddle

來源

2014-03-13 07:01:20 Felix

您需要包括jQuery庫，不要使用樣式表類型屬性Frameworks and Extensions選項卡里選擇jQuery的版本包括jQuery（除非不使用CSS）和腳本（除非不使用JavaScript）。

在這些上下文中指定類型屬性並不是必需的，因爲HTML5暗示text/css和text/javascript爲默認值。即使對於較舊的瀏覽器，也可以安全地完成此操作

HTML

<script src='http://code.jquery.com/jquery.js'><\script>

來源

2014-03-13 07:36:19

單擊顯示下拉菜單

回答

相關問題