팝업 링크가있는 5 개의 링크가있는 상자 만들기

Question

큰 문제는 아니지만 나는 생각하지 않습니다. 각 상자에 5 개의 링크가 있어야 각자 자신 만의 팝업 상자를 만들어서 더 많은 정보를 얻을 수 있습니다.

원래 Nav 막대로 사용하기 위해 만들어진 코드가 있는데, 실제로는 위대한 탐색 모음이지만 실제 함수로 옮겨 놓은 후에이를 어떻게 작동 시킬지 알아낼 수 있습니다 내 실제 코드에 추가하기 전에 내 목적.

그것은 정렬 할 수없는 목록 형식이며,이 모델의 링크 중 하나만 팝업 효과가 있습니다. 각기 다른 거품이있는 링크가 필요하기 때문에 특정 ID 또는 클래스를 대상으로 할 수 있어야하지만 일부 미친 이유로이 작업을 수행하면 작동하지 않습니다.

<ul id="menu"> 
    <li><a href="#">Home</a></li> 
    <li> 
     <a href="#">Categories</a> 
     <ul> 
      <li><a href="#">CSS</a></li> 
      <li><a href="#">Graphic design</a></li> 
      <li><a href="#">Development tools</a></li> 
      <li><a href="#">Web design</a></li> 
     </ul> 
    </li> 
    <li><a href="#">Work</a></li> 
    <li><a href="#">About</a></li> 
    <li><a href="#">Contact</a></li> 
</ul> 

#menu ul { 
    margin: 20px 0 0 0; 
    opacity: 0; 
    visibility: hidden; 
    position: absolute; 
    top: 38px; 
    left: 0; 
    z-index: 1; 
    background: #444; 
    background: linear-gradient(#444, #111); 
    box-shadow: 0 -1px 0 rgba(255,255,255,.3); 
    border-radius: 3px; 
    transition: all .2s ease-in-out; 
} 

#menu li:hover > ul { 
    opacity: 1; 
    visibility: visible; 
    margin: 0; 
} 

나는이 코드를 원래대로 그대로두면 완벽하게 작동합니다. 문제는 각각의 ID를 별도의 ID로 지정하지 않으면 어떤 요소를 팝업 할 것인지를 식별 할 수있는 방법이 없다는 것입니다.하지만 그렇게하면 작동을 멈 춥니 다.

JavaScript와 JQuery에 대한 지식이 여전히 작고 아직 작동 단계조차되지 않아서 CSS와 HTML이 모두 중요하다는 것도 알고 있어야합니다.

제 질문을 이해하기 쉽도록 게시하지 않은 경우 그렇게 말하면 불일치 사항을 해결하려고 노력하지만 도움을 받으십시오. 나는 나의 아빠의 클라이언트의 웹 사이트를 위해 이것을하고있다 그래서 말뚝은 확실히 더 작을 수 있었다. 이 disgracefully 긴 질문보고에 대한

덕분에/:

Answer 1

이 표준 팝업 메뉴처럼 보인다. 각 링크에 하위 메뉴가 필요한 경우 다음과 같이 추가 할 수 있습니다.

<ul id="menu"> 
<li><a href="#">Home</a></li> 
<li> 
    <a href="#">Categories</a> 
    <ul> 
     <li><a href="#">CSS</a></li> 
     <li><a href="#">Graphic design</a></li> 
     <li><a href="#">Development tools</a></li> 
     <li><a href="#">Web design</a></li> 
    </ul> 
</li> 
<li> 
    <a href="#">Work</a> 
    <ul> 
     <li><a href="#">Work 1</a></li> 
     <li><a href="#">Work 2</a></li> 
    </ul> 
</li> 
<li> 
    <a href="#">About</a> 
    <ul> 
     <li><a href="#">About 1</a></li> 
     <li><a href="#">About 2</a></li> 
    </ul> 
</li> 
<li> 
    <a href="#">Contact</a> 
    <ul> 
     <li><a href="#">Contact 1</a></li> 
     <li><a href="#">Contact 2</a></li> 
    </ul> 
</li> 
</ul> 

기타 CSS 변경은 필요하지 않습니다. 특별한 ID가 필요하지 않습니다. 작동하는지 알려주세요.