CSS 드롭 다운 메뉴,

http://i.imgur.com/cA2xV.png CSS 드롭 다운 메뉴,

내 드롭 다운 메뉴가 다음 div 요소 아래에 간다이 문제를 해결하는 방법에 대한 아이디어를 축소?

CSS는 :

이

.cf ul li{ 
float:left; 
margin: 0; 
padding: 0; 
list-style:none; 
font-family:"open sans", sans-serif; 

} 

.cf li a { 
display:block; 
padding:0 1em; 
line-height: 2.5em; 
color:#FFFFFF; 
} 

.cf li a:hover { 
background-color:#ffa627; 
} 


li{ 
position:relative; 
} 
ul.submenu { 
float:none; 
background: #222; 
position:absolute; 
left:-9000em; 
} 

.topmenu li:hover ul{ 
left:0; 
} 

ul.submenu li { 
float:none; 
} 

#nav-bar nav { 
background-color: #222; 

} 

.cf:before, 
.cf:after { 
content: " "; /* 1 */ 
display: table; /* 2 */ 
} 

.cf:after { 
clear: both; 
} 

/** 
* For IE 6/7 only 
* Include this rule to trigger hasLayout and contain floats. 
*/ 
.cf { 
    *zoom: 1; 

.callout1 { 
background-color: #fff; 
text-align: center; 
padding: 20px 0px; 
width:319px; 
text-decoration:none; 
font-family: 'Open Sans', sans-serif; 
color:#222; 
border-right: 1px solid #EFEFEF; 
float:left; 

}

는 HTML :

<div id="nav-bar" class="cf"> 
       <nav class="cf"> 
        <ul class="topmenu"> 
         <li class="hometop"><a href="#" class="hometop">Home</a></li> 
         <li ><a href="#" >Catagory</a> 
          <ul class="submenu"> 
           <li><a href="#">Blah Blah</a></li> 
           <li><a href="#">Blah UGG</a></li> 
          </ul> 
         </li> 
         <li ><a href="#">About</a></li> 
         <li ><a href="#">How To Order</a></li> 
        </ul> 
       </nav> 

      </div> 
<div id="extra-info"> 
       <nav> 
        <ul> 
         <li><a href="#" class="callout1">Do You Have Any Questions? <br>Contact Us</a></li>

첫 번째 시간은 지금이 모든 일을 알아 내려고 노력하고, 내 머리를 잡아 당겨, 웹 사이트를 만들고, 당신의 빠른 하나가 대단한 도움말 MEH dev에 부디!

편집 됨 : "질문이 있으십니까?"div html과 css.

출처

2013-01-02 inkplay_

사용 Z- 색인 http://www.w3schools.com/cssref/pr_pos_z-index.asp –

포스트는 질문 DIV 코드와 그가 할 CSS도 –

고마워요 조나단, ul.submenu에 z 색인을 추가하고 그것은 매력처럼 일했습니다 :) –

다음과 같이 시도해보십시오. 나는이 CSS 클래스는

큰 스택 순서를 가진 요소가 낮은 스택 순서 요소의 앞에 항상 드롭 다운에 더 큰 Z- 인덱스를 넣어

.cf{ 
    position:relative; 
    z-index:9999; 
}

출처

2013-01-02 03:24:12

은 당신이 할 수있는 일을해야 바랍니다.

같은

div{ 
    z-index:5; 
} 

.dropdown{ 
    z-index:6; 
} 


Note: z-index only works on positioned elements

(position:relative , position:absolute, or position:fixed).

는

출처

2013-01-02 03:26:16

CSS 드롭 다운 메뉴,

답변

관련 문제