마우스를 가져 가면 드롭 다운 메뉴를 만들 수있는 자바 스크립트 - HTML의 하드 코딩 없음

Question

미리 감사드립니다. 사실이 작업을 얻으려면 몇 가지 자바 스크립트 스크립트를 시도하고 아무도 가지고,하지만 내 이해 자바 스크립트 꽤 초보입니다.

링크 자체의 코드를 조정할 수 없습니다. 링크가 생성되고 있습니다. 그러나 그것은 id와 클래스로 생성됩니다. 사용자가 링크를 굴릴 때 숨겨진 ul (또는 div)이 나타납니다 - 일반적인 CSS 탐색 드롭 다운처럼 코드를 변경할 수 없도록 링크 ID를 참조하는 스크립트에 스크립트를 추가하고 싶습니다. 실제 링크. CSS는 일반적으로 변경할 수 있습니다.

이렇게 할 수있는 자바 스크립트가 있습니까? 나는 질의를 할 수있다 ..

다시 한번 감사드립니다! BB

Answer 1

여기에 내가 메뉴 링크 호버 상태에/숨기기 만 표시 HTML과 CSS를 사용하여 메뉴를 드롭 다운 했어요.

HTML :

<div id="menu1" class="menu"> 
    <a href="#" id="link1"> 
    Menu-1 
    </a> 
    <div id="menulist1" class="menulist"> 
    <div> 
     Option1 
    </div> 
    <div> 
     Option2 
    </div> 
    <div> 
     Option3 
    </div> 
    <div> 
     Option4 
    </div> 
    <div> 
     Option5 
    </div> 
    </div> 
</div> 
<div id="menu2" class="menu"> 
    <a href="#" id="link2"> 
    Menu-2 
    </a> 
    <ul id="menulist2" class="menulist"> 
    <li> 
     Option1 
    </li> 
    <li> 
     Option2 
    </li> 
    <li> 
     Option3 
    </li> 
    <li> 
     Option4 
    </li> 
    <li> 
     Option5 
    </li> 
    </ul> 
</div> 

CSS :

.menu{ 
    font-size:15px; 
    display:inline-block; 
    margin:0px; 
    padding:0px; 
} 
.menu a{ 
    display:block; 
    width:120px; 
    text-align:center; 
    background-color:#2211ce; 
    color:#dccb00; 
    text-decoration:none; 
} 
#menulist1{ 
    position:absolute; 
    top:33px; 
    border:1px solid #113399; 
    background-color:#88a5ff; 
    display:none; 
} 
#menulist2{ 
    position:absolute; 
    top:20px; 
    border:1px solid #113399; 
    background-color:#88a5ff; 
    display:none; 
} 
#menu1:hover #menulist1{ 
    display:block; 
} 

#menu2:hover #menulist2{ 
    margin-top:13px; 
    display:block; 
} 

.menulist div{ 
    margin-left:0px; 
    padding:3px; 
    width:112px; 
} 
.menulist li{ 
    list-style:none; 
    width:72px; 
    padding:3px; 
    margin-left:0px; 
    display:block; 
} 

.menulist div:hover,.menulist li:hover{ 
    background-color:#1155ac; 
    color:#dccb00; 
} 

나는 또한 수행 한 쓰레기통 위에서 예를 들어, http://codebins.com/codes/home/4ldqpbo