배경에 텍스트에 텍스트 퍼팅

인터넷에서 찾은 코드를 사용하여 간단한 CSS 메뉴를 만들려고했는데 다른 텍스트를 블록이나 다른 것으로 겹쳐서 표시하려고합니다.배경에 텍스트에 텍스트 퍼팅

HTML, CSS :

ul#menu ul { 
 
    padding: 0px; 
 
} 
 
ul#menu li { 
 
    position: relative; 
 
    list-style-type: none; 
 
    float: left; 
 
    width: 125px; 
 
} 
 
ul#menu li > ul { 
 
    display: none; 
 
    position: absolute 
 
} 
 
ul#menu li:hover > ul { 
 
    display: block; 
 
}

<ul id="menu"> 
 
    <li><a href="#">Item 1</a> 
 
    </li> 
 
    <li><a href="#">Item 2</a> 
 
    <ul id="sub1"> 
 
     <li><a href="#">Item 2.1</a> 
 
     </li> 
 
     <li><a href="#">Item 2.2</a> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
    <li><a href="#">Item 3</a> 
 
    </li> 
 
    <li><a href="#">Item 4</a> 
 
    </li> 
 
    <li><a href="#">Item 5</a> 
 
    </li> 
 
</ul> 
 
<br>

출처

2016-09-12 arielbeje

당신은 당신의 메뉴에 Z- 인덱스를 추가하여이 문제를 해결할 수

위를 유지합니다 내용은 상관 없습니다.

ul#menu ul { 
 
    padding: 0px; 
 
} 
 
ul#menu li { 
 
    position: relative; 
 
    list-style-type: none; 
 
    float: left; 
 
    width: 125px; 
 
} 
 
ul#menu li > ul { 
 
    display: none; 
 
    position: absolute 
 
} 
 
ul#menu li:hover > ul { 
 
    display: block; 
 
    z-index: 5; 
 
    background-color:gray; 
 
}

<ul id="menu"> 
 
    <li><a href="#">Item 1</a> 
 
    </li> 
 
    <li><a href="#">Item 2</a> 
 
    <ul id="sub1"> 
 
     <li><a href="#">Item 2.1</a> 
 
     </li> 
 
     <li><a href="#">Item 2.2</a> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
    <li><a href="#">Item 3</a> 
 
    </li> 
 
    <li><a href="#">Item 4</a> 
 
    </li> 
 
    <li><a href="#">Item 5</a> 
 
    </li> 
 
</ul> 
 
<br> 
 

 
<p> 
 

 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis molestie fermentum rhoncus. Vivamus consequat lacus non nulla scelerisque ultrices. Curabitur volutpat nisi vel libero aliquet, at eleifend dui tincidunt. Aenean tincidunt erat ipsum, ut porttitor ipsum sagittis commodo. Donec bibendum maximus quam, sed feugiat sapien efficitur eget. Aenean viverra ante dignissim nisi hendrerit interdum. Duis tristique turpis eget magna dapibus commodo. Cras elementum tempus fermentum. Proin ac est turpis. Praesent sollicitudin tellus quis nulla fermentum, ut varius sem tempor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed efficitur augue ac lorem vehicula tempor. Pellentesque fermentum vestibulum ex. Quisque a sollicitudin enim. Etiam sem ex, blandit et nibh aliquet, pellentesque tincidunt nibh. Nullam sollicitudin justo ut laoreet eleifend. 
 

 
Phasellus ipsum leo, pharetra ut eleifend a, pretium nec elit. Nullam tristique laoreet mauris at feugiat. Curabitur maximus fringilla nisl in elementum. Vestibulum vitae diam eros. Sed blandit suscipit molestie. Maecenas pretium tortor sapien, nec volutpat orci placerat sed. Nullam dictum quam id eros interdum, euismod consectetur nisl condimentum. Maecenas ullamcorper sagittis metus non sodales. Fusce ullamcorper ante dolor, at malesuada dui convallis eu. Donec a interdum mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In vitae tellus id turpis commodo pharetra. Integer sodales justo id metus mattis volutpat. 
 

 
Mauris luctus nunc quis purus accumsan, vel fermentum nulla tincidunt. Pellentesque vel nisl lacinia, consectetur ex eget, scelerisque dui. In lectus magna, mollis et interdum a, vestibulum id tellus. Morbi hendrerit massa justo. Nam ac lorem sit amet magna tincidunt vulputate nec sit amet metus. Mauris et orci sed justo feugiat ullamcorper quis non tellus. Vestibulum nec aliquet nisi, in dapibus ex. </p>

출처

2016-09-12 13:44:37 Adam

당신은 당신의 코드에 다음을 추가하여이 문제를 해결할 수

ul#sub1 {background-color:#(insert hex code you want);z-index:5;}

는 바이올린

보기

출처

2016-09-12 13:46:36 Ossi

배경에 텍스트에 텍스트 퍼팅

답변

관련 문제