當我們顯示子菜單時，如何停止移動我的html/css/jquery菜單文本？

Question

我見過很多關於使菜單出現和消失的問題，並且我發現了一個可以在桌面設備和平板設備上工作的問題的解決方案（好吧，我已經嘗試過了），我使用jQuery .toggleClass功能像夢一樣工作。

在這個菜單系統中，我有一個單獨的「菜單」標籤，單擊它時會顯示一個包含一些鏈接的下拉菜單。如果再次點擊「菜單」標籤，則下拉菜單消失。我遇到的問題是，當你點擊「菜單」文本來顯示子菜單時，「菜單」一詞向右移動一點。當你點擊隱藏菜單時，它會再次移動，我希望它保持在我放在第一位的地方！

我認爲這是CSS部分需要調整，並嘗試使用「左」屬性在我認爲它會工作的每個地方，但無濟於事。

我創建了這個jfiddle，但在那裏甚至沒有出現「菜單」這個詞。如果你想看看代碼出現的鏈接是http://jsfiddle.net/wardmw/JpgRP/

網頁本身是可見的，並且具有可見這裏的菜單按鈕：http://www.widowssons-southeast.org.uk/National/main.html

的CSS如下：

#nav { 
    padding:0; 
    margin:60px 0 0 0; 
    vertical-align: text-bottom; 
    font-size:18px; 
    font-family:'Lucida Sans Unicode'; 
    text-decoration: none; 
    list-style: none; 
    display: inline-table; 
    position: relative; 
    left: -80px; 
    z-index:30; 
} 
/* #nav>li is the "Menu" option itself. There is only one li */ 
#nav li { 
    position:relative; 
    font-weight: semibold; 
    align: right; 
    width:192px; 
    line-height:40px; 
    padding:0 10px; 
    float:right; 
    display: inline-table; 
    border-right: 0px solid #d8d8d8; 
} 
#nav ul.sub-nav { 
    font-weight: normal; 
    background: #efefef; 
    background: linear-gradient(top, #efefef 0%, #bbbbbb 100%); 
    background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%); 
    background: -webkit-linear-gradient(top, #efefef 0%, #bbbbbb 100%); 
    box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.15); 
    padding: 0 20px; 
    border-radius: 10px; 
    list-style: none; 
    position: relative; 
    display: none; 
} 
#nav ul.visible { 
    display: inline-table; 
} 
#nav ul li { 
    border-right: 0px solid #d8d8d8; 
    line-height:20px; 
    white-space:nowrap; 
    margin-bottom:2px; 
} 
#nav ul li:hover { 
    font-weight:bold; 
} 
#nav ul li a { 
color:#132d3c; 
font-size:15px; 
font-family:'Lucida Sans Unicode'; 
text-decoration: none; 
} 

在HTML腳本：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"</script> 

<script> 

$(document).ready(function() { 
    $('.parent').click(function() { 
     $('.sub-nav').toggleClass('visible'); 
    }); 
}); 

</script> 

的HTML菜單本身：

<div id="header"> 
    <div id="menudiv"> 
     <!-- This is the right-hand of the three columns in the header --> 
     <ul id="nav"> 
      <li class="parent">Menu</li> 
      <ul class="sub-nav"> 
       <li><a href="who.html">Who we are</a> 

       </li> 
       <li><a href="what.html">What we do</a> 

       </li> 
       <li><a href="where.html">Where we are</a> 

       </li> 
       <li><a href="links.html">Who we like</a> 

       </li> 
      </ul> 
     </ul> 
    </div> 
    <!-- menudiv --> 
    <div id="left"> 
     <!-- This is the left hand of the three columns --> 
     <img border="0" src="images/ws-logo.png" width="1" height="1" alt="WSMBA" /> 
    </div> 
    <!-- left --> 
    <div id="middle"> 
     <!-- This is the middle of the three columns --> 
    </div> 
    <!-- middle --> 
</div> 
<!-- header --> 
<p />Main page text. 

任何建議將受到感謝。

|/|阿廷

Answer 1

這裏是更新了自己的jsfiddle：

http://jsfiddle.net/JpgRP/1/

做工精細。

改性：

#nav ul.visible { 
    display: inline-block; 
} 

和主要除去浮動：右，對齊：右從NAV裏。