트리거 호버 드롭 다운 메뉴 onload

페이지가로드 될 때 이미 호버 드롭 다운 메뉴가 표시되도록하고 싶습니다. 현재 CSS와 HTML을 사용하여 마우스를 올리면 메뉴가 드롭 다운되지만 드롭 다운에서 페이지가로드 될 때 메뉴가 나타나기를 원하지만 마우스를 다른 드롭 다운으로 가져 가면 메뉴가 사라집니다.트리거 호버 드롭 다운 메뉴 onload

는 다음 순간에 내 HTML입니다 :

  <ul id="nav"> 
<li><a href="#">Projects</a> 
    <ul> 
    </br> 
     <li><a href="#">Project 1</a></li> 
     <li><a href="#">Project 2</a></li> 
     <li><a href="#">Project 3</a></li> 
     <li><a href="#">Project 4</a></li> 
     </li> 
    </ul> 
</li> 

<li><a href="#">Info</a> 
    <ul> 
    </br> 
     <li><a href="#">Info 1</a></li> 
     <li><a href="#">Info 2</a></li> 
     <li><a href="#">Info 3</a></li> 
     <li><a href="#">Info 4</a></li> 
    </ul> 
</li> 
</ul>

그리고 내 CSS

: 순간

#nav, #nav ul { 
padding: 0; 
margin: 0; 
list-style: none; 
text-align:left; 
} 

#nav a { 
display: block; 
text-align:left; 
} 

#nav li { 
float: left; 
padding-right:3.5px; 
text-align:left; 
} 

#nav li ul { 
position: absolute; 
width: 10em; 
visibility: hidden; 
text-align:left; 
} 

#nav li:hover ul { 
visibility: visible; 
text-align:left;

의 드롭 다운 완벽하게 작동,하지만 난에 아래로 '프로젝트'드롭 싶습니다 'Project'페이지가로드 될 때 나타납니다. 그러나 마우스가 'Info'위로 마우스를 가져 가면 사라지며 'Info'페이지가로드되면 'Info'드롭 다운이 발생합니다. 어떤 도움이라도 좋을 것입니다! 감사합니다

출처

2014-01-21 user2798841

당신이 볼 수 있도록하려면 드롭 다운에 클래스를 추가하기 위해 여기에 몇 가지 jQuery를해야합니다. – otinanai

CSS를 사용할 수 있습니다. –

@otinanai 여기

이 예제 권리 :

http://jsfiddle.net/gHe4K/

HTML :

<ul id="nav"> 
<li class="hovered"><a href="#">Projects</a> 
...

CSS :

#nav li ul { 
position: absolute; 
width: 10em; 
visibility: hidden; 
text-align:left; 
} 

#nav li.hovered ul{ 
visibility: visible; 
text-align:left;

JS :

는

$(document).ready(function() { 
    $('ul#nav li').each(function() { 
     $(this).on('mouseenter', function(){ 
      $(this).addClass('hovered');  
     }); 
     $(this).on('mouseleave', function(){ 
      $(this).removeClass('hovered');  
     });  
    }); 
});

출처

2014-01-21 16:12:01 LorDex

#nav li.current ul { 
    visibility: visible; 
} 

#nav:hover li ul { 
    visibility: hidden; 
} 

#nav li:hover ul { 
    visibility: visible; 
}

이 나를 위해 작동합니다 http://jsfiddle.net/k9bTE/

출처

2014-01-21 16:23:59 Tschitsch

트리거 호버 드롭 다운 메뉴 onload

답변

관련 문제