Выпадающего меню, добавьте больше идентификатора

Question

Я скопировал это меню:

http://50.112.96.159/wordpress/html/facebook_dropdown.html 

Он отлично работает, но у меня есть вопрос.

Я хочу, чтобы иметь больше чем одно меню, как:

<dl style="" class="dropdown"> 
        <dt><a id="linkglobal" style="cursor:pointer;"></a></dt> 
        <dd> 
         <ul id="ulglobal"> 
          <li><a href="#">Everyone</a></li> 
          <li><a href="#">Friends</a></li> 
          <li><a href="#">Only Me</a></li> 
          <li><a href="#">Customize</a></li> 
         </ul> 
        </dd> 
       </dl> 

<dl style="" class="dropdown"> 
        <dt><a id="linkglobal" style="cursor:pointer;"></a></dt> 
        <dd> 
         <ul id="ulglobal"> 
          <li><a href="#">Everyone</a></li> 
          <li><a href="#">Friends</a></li> 
          <li><a href="#">Only Me</a></li> 
          <li><a href="#">Customize</a></li> 
         </ul> 
        </dd> 
       </dl> 

Когда я установить #id в <dt>, меню не работает, я думаю, что это из-за JavaScript.

Может кто-нибудь помочь мне с этим?

Спасибо!

Answer 1

Приведенный пример URL содержит элементы A и UL с уникальными идентификаторами, но ваши одинаковые для обоих меню. Браузеры позволят дублировать идентификаторы внутри документа, но этого следует избегать по нескольким причинам, но один из них заключается в том, что JavaScript будет работать как ожидалось (с несколькими идентификаторами, этот элемент возвращается getElementById() не гарантируется).

Answer 2

Хорошо, если вы пытаетесь настроить два разных изображения - я предполагаю, что вы говорите о privacyOff & privacyOn изображения, которые вам нужно изменить html, как и другие, предлагаемые сначала с уникальными идентификаторами, а затем сменить свой css, чтобы дать изображение, которое вы хотите этим идентификаторам, так что-то вроде:

HTML:

`<dt><a id="linkglobal" style="cursor:pointer;"></a> ...</dt>` 

становится

`<dt><a id="linkglobalOne" style="cursor:pointer;"></a> ...</dt>` 

И CSS:

.dropdown dt a {background:#EEEEEE url(/wordpress/images/privacyOff.png) no-repeat scroll right center; 
display:block; width:40px; height:22px; cursor:pointer;} 

становится:

#linkglobalOne {background:#EEEEEE url(<IMAGE YOU WANT>.png) no-repeat scroll right center; 
display:block; width:40px; height:22px; cursor:pointer;}