IE와 Firefox에서 CSS 드롭 다운 메뉴가 작동하지 않습니다.

-1

저는 해결책을 찾고 있었지만 아무것도 찾지 못했습니다. 그러므로 나는 질문하고있다. 드롭 다운 메뉴는 컴퓨터의 Chrome과 집의 다른 기기 (컴퓨터 및 노트북)에서 작동합니다. Firefox 및 IE를 제외합니다.IE와 Firefox에서 CSS 드롭 다운 메뉴가 작동하지 않습니다.

#menu { 
position: absolute; 
left: 50%; 
bottom: 85.125%; 
z-index: 100; 

height: 100px; 
margin-top: -200px; 

width: 300px; 
margin-left: -150px; 
} 

ul { 
list-style-type: none; 
padding: 0; 
margin: 0; 
} 

    ul#nav li { 
background: #fff; 
float: left; 
    } 

ul#nav li a { 
display: block; 
text-decoration: none; 
border-bottom: 1px solid #ccc; 
color: #000; 
padding: 5px 15px; 
} 

ul#nav li a:hover { 
background: #aaa; 
} 

ul#nav li ul li { 
float: none; 
} 
ul#nav li ul { 
position: absolute; 
display: none; 
} 
ul#nav li:hover ul { 
display:block; 
} 

body { 
margin: 0px; 
padding: 0px; 
    } 




     <body> 
     <header> 
       <!-- input for header text--> 
     </header> 


     <div id="menu"> 
     <!-- input for the navigation menu --> 
      <ul id="nav"> 
       <li><a href="hem.html" id="hem">Hem</a></li> 

       <li> 
        <a href="#" id="browsers">Browsers</a> 
        <ul> 
      <li><a href="chrome.html">Chrome</a></li> 
      <li><a href="firefox.html">Firefox</a></li> 
      <li><a href="ie.html">IE</a></li> 
      <li><a href="opera.html">Opera</a></li> 
        </ul> 
       </li> 

      <li><a href="data.html" id="data"> Data</a></li> 
      <li><a href="synpunkt.html" id="synpunkt">Synpunkt</a></li> 
      </ul> 

     </div> 
    </body>

출처

2013-06-14 mbeck

귀하의 HTML이 분류됩니다

 <li><a>href="chrome.html">Chrome</a></li> 
     <li><a>href="firefox.html">Firefox</a></li>

이

 <li><a href="chrome.html">Chrome</a></li> 
     <li><a href="firefox.html">Firefox</a></li>

해야하지만 어쨌든 크롬에서이 작업을 얻을 수 없습니다. JSFiddle에서 문제를 재현 할 수 있습니까?

출처

2013-06-14 04:31:40 adnrw

내 대답을 확인하십시오. CSS 선택기에도 오류가 있습니다. –

죄송합니다. html과 CSS는 이제 해결되었지만 여전히 문제는 아닙니다! – mbeck

@badZoke yep good work. Firefox에서 내 버전이 제대로 작동합니다. – adnrw

두 가지 이유,

) 귀하의 HTML 오류,이 라인이 -

<li><a>href="chrome.html">Chrome</a></li> 
    <li><a>href="firefox.html">Firefox</a></li>

이

<li><a href="chrome.html">Chrome</a></li> 
    <li><a href="firefox.html">Firefox</a></li>

그리고

이 있어야한다)를 귀하의 ul이 ID를 가지고 navbar,하지만 CSS에서는 #nav을 선택 도구로 사용하고 있습니다. 아르 자형. 따라서 id를 변경하거나 css에서 selector를 변경하십시오.

확인 Test Link

편집 : 스크린 샷! :)

파이어 폭스 : enter image description here

IE9 : enter image description here

이 올바르지 않습니다 경우, 정확하지 무엇인지 설명해주십시오.

출처

2013-06-14 04:34:56

예 지금 편집했습니다. 나는 질문을하기 전에 코드를 확인하는 것을 잊었다. 문제는 여전히 존재합니다. – mbeck

"효과가 없다"는 것을 설명 할 수 있습니까? 코드는 IE10과 FX (최신)에서 잘 작동합니다 .. IE와 FX의 특정 버전을 타겟팅하고 있습니까? –

크롬처럼 보일 것입니다 - http://imgur.com/zp3Jtc2,xaAHRgW 그리고 IE와 Firefox에서는 다음과 같이 보입니다 http://imgur.com/zp3Jtc2,xaAHRgW#1 – mbeck

이 코드를 CSS에 사용하십시오 (예 : f12 키를 눌러 브라우저 모드와 문서 모드가 모두 ie9로 설정되어 있는지 확인하십시오).

편집 : 헤더는 다음과 같아야합니다.

<!doctype> 
<html> 
<head> 
    <meta charset=utf-8> 
    <title>Index</title> 
    <link rel="stylesheet" href="css/style.css"> 
</head> 



#menu 
    { 
     position: relative; 
     top: 50px; 
     left: 800px; 
     display: inline-block; 
    } 

ul 
    { 


list-style-type: none; 
     padding: 0; 
     margin: 0; 
    } 

ul#nav li 

    { 
     background: #fff; 
     float: left; 
     position: relative; 
    } 

ul#nav li a 

    { 
     display: block; 
     text-decoration: none; 
     border-bottom: 1px solid #ccc; 
     color: #000; 
     padding: 5px 15px; 
    } 

ul#nav li a:hover 

    { 
     background: #aaa; 
    } 

ul#nav li > ul li 

    { 
     float: none; 
    } 

ul#nav li > ul 

    { 
     left: 3px; 
     position: absolute; 
     top: 29px; 
     display: none; 
    } 

ul#nav li:hover ul { 
     display:block; 
    } 

body 

    { 
     margin: 0px; 
     padding: 0px; 
    }

출처

2013-06-14 06:50:12

해결책 없음, 여전히 문제. – mbeck

그러면 CSS가 제대로 빨간색이 아니므로 가져올 수 없습니다. 이 헤더를 사용하여 일부 폴더, html 파일 및 css 폴더를 해당 기본 폴더에 넣었는지 확인하고 css 폴더에 CSS 파일을 넣어 스타일이라고 부릅니다. –

IE와 Firefox에서 CSS 드롭 다운 메뉴가 작동하지 않습니다.

답변

관련 문제