페이지의 드롭 다운 메뉴 부분에서 마우스를 가져 가면 마우스가 움직입니다.

드롭 다운 메뉴가있는 웹 사이트를 개발하려고합니다. 메뉴 아래의 다음 부분에는 슬라이더 구분이 있지만 메뉴에 마우스를 올리면 하위 메뉴가 표시됩니다 슬라이더 부분이 아래로 이동합니다. 페이지의 드롭 다운 메뉴 부분에서 마우스를 가져 가면 마우스가 움직입니다.

그래서 누구든지 문제는 당신의 요소가 위치 상대 있다는 것입니다

<html> 
<head> 
<style type="text/css"> 
#header{ 
    height: 90px; 
} 
#navigation{ 
    height: 30px; 
    background-color: #0099FF; 
    border: 1px solid #0099FF; 
    border-radius: 10px; 
    z-index:1000; 
} 
ul { 
    list-style: none; 
    padding: 0px; 
    margin: 0px; 
} 
ul li { 
    display: block; 
    position: relative; 
    float: left; 
    padding-right: 40px;  
} 
li ul { 
    display: none; 
} 
ul li a { 
    display: block; 
    padding: 5px 10px 5px 10px; 
    text-decoration: none; 
    color: #FFFFFF; 
    font:Verdana, Arial, Helvetica, sans-serif; 
    font-size: 20px; 
} 
ul li a:hover { 
    background: #00CCFF; 
} 
li:hover ul { 
    display: block; 
    z-index: 1000; 
} 
li:hover li { 
    float: none; 
} 
li:hover a { 
    background: #00CCFF; 
} 
li:hover li a:hover { 
    background: #D2F5FF; 
} 
#drop-nav li ul li { 
    border-top: 0px; 
} 
#clearmenu{ 
    clear: left; 
} 
#sliderandnews{ 
    height: 300px; 
} 
#slidermain{ 
    height: 300px; 
    width: 65%; 
    float: left; 
} 
#news{ 
    height: 300px; 
    width: 33%; 
    border: 2px solid #F0FFFF; 
    border-radius: 20px; 
    float: right; 
    background-color: #F0FFFF; 
} 
.clear{ 
    height: 40px; 
} 
</style> 
</head> 
<body> 
<div id="header"> 
</div> 
<div id="navigation"> 
    <ul id="drop-nav"> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">About Us</a></li> 
     <li><a href="#">Academic Programs</a> 
      <ul> 
       <li><a href="#">BBA</a></li> 
       <li><a href="#">BCA</a></li> 
       <li><a href="#">BE</a></li> 
      </ul> 
     </li> 
     <li><a href="#">Faculties</a></li> 
     <li><a href="#">Admission</a></li> 
     <li><a href="#">Downloads</a></li> 
     <li><a href="#">Contact</a></li> 
    </ul> 
</div> 
</div> 
    <div class="clear"></div> 
    <div id="sliderandnews"> 
     <div id="slidermain"> 
      This section is changes its position on mousehover 
     </div> 
     <div id="news"> 
     </div> 
    </div>   
</body> 
</html>

출처

2015-02-06 umesh brainser

우리가 당신을 도울 수 있도록 몇 가지 코드를 게시하십시오. http://stackoverflow.com/help/how-to-ask를 방문하여 질문에 대한 답변을 얻을 수있는 가능성을 높일 수 있습니다. –

먼저 시도해 봤습니까? 그렇다면 jsfiddle 또는 plunker 링크를 공유하십시오. – Rajeshwar

을 다음과 같이 내가 코드는 작업 을 수행 할 수있는 방법을 제안 할 수 있습니다. 따라서 하위 메뉴가 나타나면 아래의 모든 요소가 아래로 이동합니다. 탐색 막대에 절대 위치 지정을 추가하고 CSS의 top 속성을 사용하여 상단에서부터 위치를 결정할 수 있습니다. 이렇게하면 #header (상단 여백을주는 역할 만 함)을 제거 할 수 있습니다.

#navigation{ 
    position:absolute; 
    top:90px; 
}

마찬가지로 #sliderandnews 블록을 사용할 수 있습니다. 탐색 메뉴에 절대 위치 지정을했기 때문에 HTML 요소에서 페이지 내에서 탐색이 제거됩니다. 이를 보완하기 위해이 요소에 적절한 상단 여백을 추가해야합니다.

#sliderandnews{ 
    height: 300px; 
    margin-top:190px; 
}

여기는 최종 fiddle입니다.

출처

2015-02-07 11:23:28 Giorgio

정말 고마워요. 그것은 나를 위해 일했다 @giorgio –

페이지의 드롭 다운 메뉴 부분에서 마우스를 가져 가면 마우스가 움직입니다.

답변

관련 문제