Горизонтальная линия блокирует подменю

Я организую свой header.html, но так как я вставил коды для выпадающего меню, горизонтальная линейная строка, которая является изображением, блокирует подменю. Есть ли способ разместить синюю полосу на назад подменю?Горизонтальная линия блокирует подменю

header.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" charset="utf-8;" content="text/html" /> 



<link rel="stylesheet" type="text/css" href="styles.css" /> 

</head> 

<body> 

    <d 
</html>

CSS

{ 
    font-family: verdana,sans-serif; 
} 

div { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 

.container { 
    border-collapse: collapse; 
    position: relative; 
    min-height: 90%; 
    height: auto !important; 
    height: 90%; 
    margin: 0; 
    min-width:800px; 
    width: 800px; 
} 

#left-panel, #right-panel { 
     border-collapse: collapse; 
     display:inline-block; 
     width:30em; 
     height:100%; 
     margin:0px; 
     min-width:100px; 
     background:white; 
     overflow:hidden; 
} 
.header { 
    margin: 0 auto; 
    width: 800px; 
    height: auto; 
    border-collapse: collapse; 
} 

.footer, .push { 
    width:800px; 
    height: 40px; 
    clear: both; 
    margin: 0 auto 0; 
} 

p.copyright { 
    font-weight: bold; 
    text-align: center; 
} 

.text-image{ 
    width:533px; 
    height:321px; 
    background-image: url('images/about-cti.jpg'); 
    background-position: 350px 250px; 
} 

.a { 
     text-align: left; 
     font-family: verdana; 
     font-size: 11pt; 
     text-decoration: none; 
     color : #000000; 
} 
<!--Navigation--> 
#cssmenu ul, 
#cssmenu li, 
#cssmenu span, 
#cssmenu a { 
    margin: 0; 
    padding: 0; 
    position: relative; 
} 
#cssmenu { 
    list-style:none; 
    float:right; 
} 
#cssmenu ul { 
    list-style: none; 
} 
#cssmenu > ul > li { 
    float: left; 
} 
#cssmenu ul ul { 
    display: none; 
    position: absolute; 

    left: -1px; 
    min-width: 100%; 
    text-align: center; 
    *width: 100%; /* IE7 hack*/ 
} 
#cssmenu li:hover ul { 
    display: block; 
} 
<!--End of Navigation-->

источник

2013-07-13 yakults

Пожалуйста, вы можете сделать скрипку, чтобы сделать ее более легкой для нас. –

Большинство элементов состоят из изображений. Я скорее дал ссылку на свой сайт, чтобы лучше понять, в чем моя проблема. 'comgtech.com/header.html' – yakults

Советую поставить это в свой вопрос –

Добавить CSS к вашей горизонтальной линии:

z-index: -1; 
margin-top: 2px;

Или:

z-index: 20;

К вашим <ul>

margin-top: 2px;

Для вашей линии

Или:

li, ul { 
    z-index: 20; 
}

отметить также изменения в этом Div:

<div style="background: url('images/heading-top.jpg') repeat-x; height: 20px; margin-bottom:0; position: relative; top:86px;margin-top: 2px;"></div>

источник

2013-07-13 11:03:13

Обновлен мой ответ –

Вы можете просто добавить z-index:900 (не обязательно быть 900, но относительно высоким) в подменю ul элементов.

источник

2013-07-13 11:03:27 Steven

Этого решение:

#cssmenu ul { z-index:1;}

Надеется, что это работает.

источник

2013-07-13 11:12:24 noob

Горизонтальная линия блокирует подменю

ответ

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