호버 메뉴의 절반 만 나타납니다.

개발중인 웹 사이트에서 탐색 메뉴 항목 위에 마우스를 가져갈 때 나타나는 메뉴를 만들고 있습니다. 그러나 호버 메뉴의 절반 만 나타납니다.호버 메뉴의 절반 만 나타납니다.

HTML :

<div class= "navn"> 
    <ul> 
     <li> 
      <a class="btn" href="about_contact.html"> 
       About Us    
       <div class="tooltip"> 
        Contact Info, and <b>stuff</b> <!--the txt inside the hover thing--> 
       </div> 
      </a> 
     </li> 
    </ul> 
</div>

CSS :

내가 볼 무엇

.btn { 
    /* irrelevant: some styling to make the anchor tags look nicer */ 
    display: inline-block; 
    padding: 6px 12px; 
    margin-bottom: 0; 
    font-size: 14px; 
    font-weight: normal; 
    text-align: center; 
    white-space: nowrap; 
    margin: auto; 
    background-image: none; 
    border: 1px solid transparent; 
    border-radius: 4px; 
    text-decoration: none; 
    font-family: 'Lucida Sans', 'Arial', 'sans-serif'; 
} 
.btn:hover .tooltip { 
    display: block; 
} 
.tooltip { 
    background-color: white; 
    color: black; 
    position: absolute; 
    display: none; 
    border: 1px solid black; 
}

: As you can see, only upper half is appearing

왜 이런 일이? 이것을 막으려면 어떻게해야합니까? 어떤 JSFiddle

편집 죄송

: 나는 내가 <a> 태그를 표준 도구 설명을 사용할 수 있습니다 알고,하지만 난 툴팁 텍스트를 포맷 한 싶다.

출처

2014-12-04 stackptr

'z-index : 1;'을 제거하면'position : relative;도 표시되지 않기 때문에'position : absolute'도 제거 할 수 있습니다. – EternalHour

여전히 제목 속성을 지정할 수 있습니다. 이 질문을보십시오 [앵커 태그 내의 제목 속성 스타일을 변경하는 방법?] (http://stackoverflow.com/questions/2011142/how-to-change-the-style-of-title-attribute -inside-the-anchor-tag) – starwarspunk

@EternalHour 위치를 제거하면 : absolute, 그러면 "툴팁"이 버튼의 바로 오른쪽에 나타납니다. 나는 그것을 원하지 않는다. – stackptr

아마도 <div class="navn">의 높이가 충분하지 않을 수 있습니다. 그것을 확장하고 무슨 일이 일어 났는지보십시오. 또는 툴팁에 Z- 색인을 설정하십시오.

세트 ul{ height: 60px; //for example}. 나는 그것이 당신을 도울 것이라고 생각합니다.

출처

2014-12-04 23:10:17

고마워요, 고마워요! 이것은 잘 작동했습니다! – stackptr

내가 도울 수있어서 기쁩니다. :) –

호버 메뉴의 절반 만 나타납니다.

답변

관련 문제