CSS를 사용하여 마우스 오버시 마우스 오버시 문제가있는 메뉴

하위 메뉴 항목을 슬라이딩하여 메뉴 막대를 만들고 싶었습니다. 이를 위해 다음 코드를 작성했지만 전환 (슬라이드 다운) 효과는 호버에서 작동하지 않습니다. 나는 CSS를 사용해서 그것을하고 싶다. 누군가 나를 도와주세요.CSS를 사용하여 마우스 오버시 마우스 오버시 문제가있는 메뉴

<html> 
    <head> 
     <style type="text/css"> 
      .menu { 
       width: 100%; 
       background-color: rgba(250,250,250,0.9); 
       box-shadow: 0 2px 2px -2px rgba(0,0,0,0.6); 
      } 
      .menu ul{ 
       list-style: none; 
       color: #31373d; 
       padding: 0; 
       margin: 0px 20px; 
       position: relative; 
      } 
      .menu ul li{ 
       height: 35px; 
       line-height: 35px; 
       font-weight: 600; 
       width: 100px; 
       text-align: center; 
      .menu > ul { 
       z-index: 0; 
      } 

      .menu > ul > li { 
       display: inline-block; 
       padding: 5px 10px; 
       margin: 0; 
       margin-right: 5px; 
       position: relative; 
       cursor: pointer; 
       text-shadow: 1px 2px 2px white; 
      } 
      .menu ul ul { 
       display: none; 
       height: 0px; /* Height initially set to 0 */ 
       overflow: hidden; 
       background: #f0f0f0; 
       -moz-transition: height 0.5s linear; 
       text-shadow: 1px 2px 2px #f0f0f0; 
       box-shadow: 0 4px 2px -2px rgba(0,0,0,0.1); 
       z-index: 2; 
       border: 1px solid #a0a0a0; 

       -webkit-transition: height 0.3s linear; 
       -moz-transition: height 0.3s linear; 
       -o-transition: height 0.3s linear; 
       -ms-transition: height 0.3s linear; 
       transition: height 0.3s linear; 
       left: -23px; 
       top: 45px; 
      } 



      .menu > ul > li:hover ul { 
       display: block; 
       height: auto; /* Height set to auto for the transition to take effect */ 
       position: absolute; 
      } 
      .menu ul ul li{ 
       width: 200px; 
       height: 40px; 
       line-height: 40px; 
       border-bottom: 1px solid #a0a0a0; 
      } 
     </style> 
    </head> 
    <body> 
     <div class="menu"> 
      <ul> 
       <li class="newbox">Home 
        <ul> 
         <li>City Home</li> 
         <li>Country Home</li> 
        </ul> 
       </li> 
       <li class="newbox">About 
        <ul> 
         <li>About Me</li> 
         <li>About others</li> 
         <li>About my family</li> 
        </ul> 
       </li> 
       <li class="newbox">Contact 
        <ul> 
         <li>Contact Me</li> 
        </ul> 
       </li> 
      </ul> 
     </div> 
    </body> 
</html>

감사

출처

2014-02-14 Bharat

당신은 요소의 높이를 전환 height:auto을 사용할 수 없습니다. 전환이 작동하려면 최대 높이 또는 특정 픽셀 높이를 사용해야합니다.

.menu > ul > li:hover ul { 
    display: block; 
    height: 550px;  /* Change from auto to a large number */ 
    max-height: 100px; /* Add a max-height to prevent it from getting too large */ 
    position: absolute; 
}

> 연산자를 올바르게 사용한다고 가정하면 정상적으로 작동합니다.

출처

2014-02-14 14:03:42 Adosi

여전히 작동하지 않습니다. 도와주세요! – Bharat

실제 높이 : 자동; mozilla firefox와 konqueror에서 페이지가 열리면 호버에서 잘 작동합니다. 당신은 하나의 브래킷을 잊어 버렸습니다} 그리고 그것이 당신의 문제를 만들고 있다고 생각합니다. Windows를 사용하는 경우 notepad ++, Linux를 사용하는 경우 kate 또는 bluefish와 같은 좋은 편집기를 사용하는 것이 좋습니다. 색상, 시작 및 종료 브래킷 - 각() [] {} 등을 표시하도록 설정할 수 있으므로 쉽게 지울 수있는 오류가 발생할 때 훨씬 더 잘 작동하고 실수하지 않을 수 있습니다. 특히 피곤하면 산만 해졌다.

를 체크 아웃 :

.menu ul li{ 
       height: 35px; 
       line-height: 35px; 
       font-weight: 600; 
       width: 100px; 
       text-align: center; 
      .menu > ul { 
       z-index: 0; 
      }

그것이 있어야 작동하려면 :

.menu ul li { 
       height: 35px; 
       line-height: 35px; 
       font-weight: 600; 
       width: 100px; 
       text-align: center; 
} 
      .menu > ul { 
       z-index: 0; 
      }

한 잘못된 charaker은 여전히 우리에게 시간, 돈 및 신경 세포의 요금으로 제공됩니다. 고급 편집기를 사용하면 많은 시간, 노력 및 두통을 줄일 수 있습니다.

출처

2015-07-31 15:38:46 user5178505

CSS를 사용하여 마우스 오버시 마우스 오버시 문제가있는 메뉴

답변

관련 문제