Выпадающее меню отключает параметры при нажатии

Question

У меня есть выпадающее меню с 4 ссылками, и когда я нажимаю на один из них, остальное меню выпадает.

HTML-код является:

<div class="dropdown-graus dropdown-element"> 
<div class="dropdown-graus-button dropdown-button">GRADES</div> 

<div class="dropdown-graus-content"> 

<div class="dropdown-graus-facultat-1 dropdown-facultad"> 
<div class="facultat-1-name">LABEL 1</div> 
<div class="facultat-1-view">VIEW 1</div> 
</div> 

<div class="dropdown-graus-facultat-2 dropdown-facultad"> 
<div class="facultat-2-name">LABEL 2</div> 
<div class="facultat-2-view">VIEW 2</div> 
</div> 

<div class="dropdown-graus-facultat-3 dropdown-facultad"> 
<div class="facultat-3-name">LABEL 3</div> 
<div class="facultat-3-view">VIEW 3</div> 
</div> 

</div> 
</div> 

<div class="dropdown-masters dropdown-element"> 
<div class="dropdown-masters-button dropdown-button">MASTERS</div> 
<div class="dropdown-masters-content"></div> 
</div> 

<div class="dropdown-futurs dropdown-element"> 
<div class="dropdown-futurs-button dropdown-button">FUTURE</div> 
<div class="dropdown-futurs-content"></div> 
</div> 

<div class="dropdown-coneix dropdown-element"> 
<div class="dropdown-coneix-button dropdown-button">CONTACT</div> 
<div class="dropdown-coneix-content"></div> 
</div> 

и CSS:

.dropdown-graus-content { 
    display: none; 
    overflow: hidden; 
    float: left; 
    width: 100%; 
    background-color: #f0f0f1; 
    padding: 20px 10px; 
} 

.dropdown-masters-content { 
    display: none; 
} 

.dropdown-futurs-content { 
    display: none; 
} 

.dropdown-coneix-content { 
    display: none; 
} 

.dropdown-button { 
    float: left; 
    padding: 0.312em 0.625em; 
} 

.dropdown-button { 
    padding: 0.312em 0.625em 0.312em 0em; 
    font-variant: small-caps; 
    font-size: 1.25em; 
} 

.dropdown-facultad { 
    float: left; 
    background-color: white; 
    padding: 10px 20px; 
    width: 300px; 
} 

.dropdown-graus-facultat-1 { 
    margin: 0 5px 0 0; 
} 

.dropdown-graus-facultat-2 { 
    margin: 0px 5px; 
} 

.dropdown-graus-facultat-3 { 
    margin: 0 0 0 5px; 
} 

Вот jsfiddle с кодом: http://jsfiddle.net/9wDgL/

Если нажать на МАРОК, вы увидите, как меню нажимается вниз. Отображение содержимого с помощью onClick() должно быть относительным, поскольку остальная часть содержимого должна быть нажата вниз.

Я делал это много раз, но я не могу найти, почему он сейчас не работает.

Answer 1

Просто поменять порядок div с, так что все содержимым выпадающего приходит после всех пунктов меню:

JSFiddle here

<!-- menu items --> 
    <div class="dropdown-graus dropdown-element"> 
     <div class="dropdown-graus-button dropdown-button">GRAUS</div> 
    </div> 
    <div class="dropdown-masters dropdown-element"> 
     <div class="dropdown-masters-button dropdown-button">MASTERS</div> 
    </div> 
    <div class="dropdown-futurs dropdown-element"> 
     <div class="dropdown-futurs-button dropdown-button">FUTURE</div> 
    </div> 
    <div class="dropdown-coneix dropdown-element"> 
     <div class="dropdown-coneix-button dropdown-button">CONTACT</div> 
    </div> 

    <!-- dropdown content --> 
    <div class="dropdown-graus-content"> 
     <div class="dropdown-graus-facultat-1 dropdown-facultad"> 
      <div class="facultat-1-name">LABEL 1</div> 
      <div class="facultat-1-view">VIEW 1</div> 
     </div> 
     <div class="dropdown-graus-facultat-2 dropdown-facultad"> 
      <div class="facultat-2-name">LABEL 2</div> 
      <div class="facultat-2-view">VIEW 2</div> 
     </div> 
     <div class="dropdown-graus-facultat-3 dropdown-facultad"> 
      <div class="facultat-3-name">LABEL 3</div> 
      <div class="facultat-3-view">VIEW 3</div> 
     </div> 
    </div> 
    <div class="dropdown-masters-content"></div> 
    <div class="dropdown-futurs-content"></div> 
    <div class="dropdown-coneix-content"></div> 
</div>