내비게이션 메뉴 항목이 사파리에는 표시되지 않지만 메뉴 위로 마우스를 가져 가면 하위 메뉴가 올바르게 표시됩니다.

Question

메뉴 항목은 모든 브라우저에서 올바르게 표시되지만 사파리에서는 보이지 않습니다. 내가 메뉴에 마우스를 찍을 때 메뉴 항목이와 하위 메뉴를 보여주는 것은 바로 posibile 등이 issuse를 해결 correctly.Please처럼은 .......... 보인다

HTML :

<div class="sidemenu"> 
      <ul id="sidenav"> 
       <li><a href="hi.html">Hi</a></li> 
       <li><a href="#">Know Us</a> 
         <ul> 
           <li><a href="process.html">Process</a></li> 
           <li><a href="#">Before We Start</a></li>   
         </ul> 
       </li> 
       <li><a href="serve.html">We Serve</a> 
         <ul> 
           <li><a href="#">Websites</a></li> 
           <li><a href="#">Online Promotion</a></li> 
           <li><a href="#">Mobile Applications</a></li> 
           <li><a href="#">Software development</a></li> 
           <li><a href="#">Out Sourcing</a></li> 
         </ul> 
       </li> 
       <li><a href="work.html">Portfolio</a></li> 
       <li><a href="discuss.html">Let’s Discuss</a></li> 
       <li><a href="career.html">Join Us</a></li> 
      </ul> 

CSS는 : CSS에서

 sidemenu{ 
     width:200px; 
    height:auto; 
    margin-top:150px; 

}   

sidenav ul  { 
float: left; 
padding: 0; 
border-bottom: none; 
list-style: none; 
} 
sidenav li { 
list-style:none; 
position: relative; 
} 

sidenav li a { 
padding: 1em 2em; 
text-decoration: none; 
color:#000000; 
float: left; 
/* background: -moz-linear-gradient(top, black, #3c3c3c 1px, #292929 25px); 
background: -webkit-gradient(linear, left top, left 25, from(black), color-stop(4%, #3c3c3c), to(#292929)); 
border-right: 1px solid #3c3c3c; 
border-left: 1px solid #292929; 
border-top: 1px solid #545454;*/ 
} 
sidenav li a:hover { 
background: #6666CD; 
background: -moz-linear-gradient(top, #11032e, #6666CD); 
background: -webkit-gradient(linear, left top, left bottom, from(#11032e), to(#2a0d65)); 
border:2px solid #000000; 
border-radius:20px; 
color:#FFFFFF; 
} 
sidenav li ul { 
overflow:hidden; 
display: none; 
position: absolute; 
left: 130px; 
padding: 0; margin: 0; 

} 
sidenav li:hover > ul { 
display: block; 
} 
sidenav li ul li, #sidenav li ul li a { 
float: none; 
} 
sidenav li ul li { 
_display: inline; 
} 
sidenav li ul li a { 
width: 120px; 
display: block; 
} 
sidenav li ul li ul { 
display: none; 
} 
sidenav li ul li:hover ul { 
left: 100%; 
top: 0; 
} 
sidenav li ul { 
}  

Answer 1

, . 클래스 이름 앞에 기록되고 #는 ID 전에 기록됩니다.

css에서 수행하지 않았습니다.

CSS : 여기

.sidemenu { 
    width:200px; 
    height:auto; 
    margin-top:150px; 
} 
#sidenav ul { 
    float: left; 
    padding: 0; 
    border-bottom: none; 
    list-style: none; 
} 
#sidenav li { 
    list-style:none; 
    position: relative; 
} 
#sidenav li a { 
    padding: 1em 2em; 
    text-decoration: none; 
    color:#000000; 
    float: left;   
} 
#sidenav li a:hover { 
    background: #6666CD; 
    background: -moz-linear-gradient(top, #11032e, #6666CD); 
    background: -webkit-gradient(linear, left top, left bottom, from(#11032e), to(#2a0d65)); 
    border:2px solid #000000; 
    border-radius:20px; 
    color:#FFFFFF; 
} 
#sidenav li ul { 
    overflow:hidden; 
    display: none; 
    position: absolute; 
    left: 130px; 
    padding: 0; 
    margin: 0; 
} 
#sidenav li:hover > ul { 
    display: block; 
} 
#sidenav li ul li, #sidenav li ul li a { 
    float: none; 
} 
#sidenav li ul li { 
    display: inline; 
} 
#sidenav li ul li a { 
    width: 120px; 
    display: block; 
} 
#sidenav li ul li ul { 
    display: none; 
} 
#sidenav li ul li:hover ul { 
    left: 100%; 
    top: 0; 
} 
#sidenav li ul { 
} 

DEMO here.

Answer 2

당신이 이동합니다.

CSS의 변경

WORKING DEMO

는 :

#sidenav li { 
    list-style:none; 
    position: relative; 
    display:block; 
} 

이 사파리에서 작동합니다. 희망이 도움이됩니다.