2013-04-21 47 views
4

我有这样的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; } 

问题:

在许多情况下,导航栏将在消失其他格

enter image description here

例如,我添加了“#banners”div,我认为问题是因为“position:relative;”

但正如我所说“#banners”分区仅仅是例子,如果我要解决这个问题,我应该在#navbar #NavItem:悬停#PopOver

任何想法吗?

谢谢。

+1

你有没有考虑上的元素改变z-index的? – Schleis 2013-04-21 02:17:43

回答

2
#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; 
z-index:1; 
} 
1

设置z-index:2;或更大#PopOver