我有这样的HTML代码CSS的其他分区下的导航栏消失
<div id="navbar">
<ul>
<li><a href="#">Page1</a></li>
<li><a href="#">page2</a></li>
<li id="NavItem">
<a href="#">page3</a>
<div id="PopOver">Some text here<br>Some text here<br>Some text here<br>Some text here<br>Some text here<br>Some text here<br>Some text here</div>
</li>
<li><a href="#">page4</a></li>
</ul>
</div>
<div id="banners">
<div class="wrap">
<div class="left"><img src="http://www.mountainecho.bizland.com/banex1.jpg"></div>
<div class="right"><img src="http://www.mountainecho.bizland.com/banex1.jpg"</div>
</div>
</div>
和CSS代码
#navbar { position: relative; margin: 3px; }
#navbar ul { padding: 0; margin: auto; background: #f0f0f0 url(../images/1px.png) repeat-x 0 -441px; padding: 4px 0 4px 0; }
#navbar li { display: inline; margin-right: 80px; }
#navbar li a { font-family: EqualSansDemo; font-size: 1.6em; color: #555555; text-shadow: 1px 1px 0px #fff; }
#navbar li a:hover { color: #0071e4; }
#PopOver {
position:absolute;
border:2px solid #07B1F1;
width:170px;
height:auto;
padding:15px 5px 10px 5px;
display:none;
top:30px;
left:229px;
background-color:#FFFFFF;
border-radius:8px;
-moz-border-radius:8px;
-webkit-border-radius:8px;
}
#NavItem:hover #PopOver {display:block}
#banners { padding-top: 25px; padding-bottom: 25px; position: relative; }
.wrap { width: 1000px; margin: 0 auto; }
.left { float: left; }
.right { float: right; }
问题:
在许多情况下,导航栏将在消失其他格
例如,我添加了“#banners”div,我认为问题是因为“position:relative;”
但正如我所说“#banners”分区仅仅是例子,如果我要解决这个问题,我应该在#navbar #NavItem:悬停#PopOver
任何想法吗?
谢谢。
你有没有考虑上的元素改变z-index的? – Schleis 2013-04-21 02:17:43