2016-03-12 4 views
0

Я новичок в css, мое выпадающее меню скрывается за div, пожалуйста, помогите мне разобраться с проблемой. мой HTML и CSS код:Выпадающее меню скрывается за div

<style> 
 
\t * 
 
\t { 
 
\t \t margin:0px; 
 
\t \t padding:0px; 
 
\t \t 
 
\t } 
 
\t body 
 
\t { 
 
\t \t background-color:mintcream; 
 
\t \t 
 
\t } 
 
\t \t #header 
 
\t \t { 
 
\t \t \t 
 
\t \t \t height:260px; 
 
\t \t \t width:auto; 
 
\t \t \t margin:5px; 
 
\t \t } 
 
\t \t 
 
\t \t #headerimg 
 
\t \t { 
 
\t \t \t height: 260px; 
 
\t \t \t width:100%; 
 
\t \t \t 
 
\t \t } 
 
\t \t 
 
\t \t \t \t 
 
\t #wrap \t #menu 
 
\t \t { 
 
\t \t \t width:550px; 
 
\t \t \t margin:0 auto; 
 
\t \t \t padding:10px; \t \t \t \t \t \t 
 
\t \t } 
 
\t \t 
 
\t \t #wrap 
 
\t \t { 
 
\t \t \t height:50px; 
 
\t \t \t background-color:lightsalmon; 
 
\t \t \t border:1px solid white; 
 
\t \t \t border-radius:5px; 
 
\t \t } 
 
\t \t 
 
\t \t 
 
\t #wrap #menu ul li 
 
\t \t { 
 
\t \t \t background-color:black; 
 
\t \t \t border-radius:5px; 
 
\t \t \t width: 120px; 
 
\t \t \t height: 30px; 
 
\t \t \t line-height: 30px; 
 
\t \t \t float: left; 
 
\t \t \t text-align: center; 
 
\t \t \t list-style-type:none; 
 
\t \t \t margin-left: 3px; 
 
\t \t \t 
 
\t \t } 
 
\t \t 
 
\t #wrap \t #menu ul li a{ 
 
\t \t \t color:white; 
 
\t \t \t text-decoration:none; 
 
\t \t \t display:block; 
 
\t \t } 
 
\t \t 
 
\t \t #wrap #menu ul li a:hover 
 
\t \t { 
 
\t \t \t background-color:mistyrose; 
 
\t \t \t color:orangered; 
 
\t \t \t border-radius:5px; 
 
\t \t \t 
 
\t \t } 
 
\t \t 
 
\t #wrap #menu ul li ul li 
 
\t \t { 
 
\t \t \t 
 
\t \t \t display:none; 
 
\t \t } 
 
\t \t 
 
\t #wrap \t #menu ul li:hover ul li 
 
\t \t { 
 
\t \t \t 
 
\t \t \t display:block; 
 
\t \t \t 
 
\t \t } 
 
\t \t 
 
\t \t #content 
 
\t \t { 
 
\t \t \t 
 
\t \t \t width:100%; 
 
\t \t \t height:500px; 
 
\t \t \t background-color: teal; 
 
\t \t \t margin:5px; 
 
\t \t } 
 
\t \t #content1 
 
\t \t { 
 
\t \t \t width:50%; 
 
\t \t \t height:500px; 
 
\t \t \t background-color: yellow; 
 
\t \t \t float:left; 
 
\t \t } 
 
\t \t #content2 
 
\t \t { 
 
\t \t \t width:50%; 
 
\t \t \t height:500px; 
 
\t \t \t background-color:red; 
 
\t \t float:left; 
 
\t \t } 
 
\t </style> 
 
\t 
 
\t
<body> 
 
\t <div id="header"> 
 
\t \t <img id="headerimg" src="doc.jpg" /> 
 
\t \t \t \t 
 
\t </div> 
 

 
\t <div id="wrap"> 
 
<div id="menu"> 
 
\t 
 
\t <ul> 
 
\t \t <li><a href="#">Home</a></li> 
 
\t \t <li><a href="#">About Us</a></li> 
 
\t \t <li><a href="#">Contact Us</a></li> 
 
\t \t <li><a href="#">Services</a> 
 
\t \t \t <ul> 
 
\t \t \t \t <li><a href="#">Food</a></li> 
 
\t \t \t \t <li><a href="#">Hospital</a></li> 
 
\t \t \t \t <li><a href="#">Medical</a></li> 
 
\t \t \t </ul> 
 
\t \t \t 
 
\t \t \t 
 
\t \t </li> 
 
\t </ul> 
 
\t 
 
</div> 
 

 

 
</div> 
 

 
<div id="content"> 
 
\t <div id="content1"> </div> 
 
\t <div id="content2"> </div> 
 

 
</div> 
 
</body>

Я новичок в CSS. Мое выпадающее меню скрывается за div. Пожалуйста, помогите мне найти проблему.

ответ

0

Пожалуйста, добавьте ниже CSS

ul {position: relative; z-index: 99999; } 
0

Просто добавьте позиции: по сравнению с "#wrap #menu ul li". Я думаю, что ваша проблема решена. Если у вас есть другая проблема, тогда поставьте ее здесь.

Благодарим за вопрос.

Смежные вопросы