1. 首頁
  2. 問答
  3. CSS菜單代碼不工作在IE6

CSS菜單代碼不工作在IE6

2010-08-27 110 views
0

我有一個CSS菜單的代碼...我得到它使用CSS菜單生成器工具生成的...它不與IE6一起工作...怎麼辦...CSS菜單代碼不工作在IE6

alt text

HTML是這裏

<table border="0" cellpadding="0" cellspacing="0" height="30"> 
<tr> 
    <td> 
    <div class="mainmenu"> 
    <ul> 
      <li class="li_nc"><a href="/" target="_self" >HOME</a></li> 
      <li class="li_hc"><a href="#" >PROGRAMS</a><ul class="ul_ch"> 
      <li class="li_hc"><a href="#" >Engineering</a><ul class="ul_ch"> 
       <li class="li_nc"><a href="#" >BEE (Electronics 4 Years)</a></li> 
       <li class="li_nc"><a href="#" >BEE (Tele Comm. 4 Years)</a></li> 
       <li class="li_nc"><a href="#" >BSE (Software 4 Years)</a></li> 
       <li class="li_nc"><a href="#" >BCE (Computer 4 Years)</a></li> 
      </ul></li> 
      <li class="li_hc"><a href="#" >Management Sciences</a><ul class="ul_ch"> 
       <li class="li_nc"><a href="#" >BBA (Years)</a></li> 
       <li class="li_nc"><a href="#" >MBA (3 Years)</a></li> 
       <li class="li_nc"><a href="#" >MBA (2 1/2 Years)</a></li> 
       <li class="li_nc"><a href="#" >MBA (1 1/2 Years)</a></li> 
       <li class="li_nc"><a href="#" >MBA (Weekend)</a></li> 
       <li class="li_nc"><a href="#" >MBA (Pharma)</a></li> 
       <li class="li_nc"><a href="#" >Ph.D Management</a></li> 
      </ul></li> 
      <li class="li_hc"><a href="#" >Earth & Environmental Sciences</a><ul class="ul_ch"> 
       <li class="li_nc"><a href="#" >BS (Geology\Geophysics)</a></li> 
       <li class="li_nc"><a href="#" >MS (Geology\Geophysics)</a></li> 
       <li class="li_nc"><a href="#" >MS (Environmental Policy & Management)</a></li> 
       <li class="li_nc"><a href="#" >MS & Ph.D (Environmental)</a></li> 
      </ul></li> 
      <li class="li_hc"><a href="#" >Professional Psychology</a><ul class="ul_ch"> 
       <li class="li_nc"><a href="#" >BS (4 Years)</a></li> 
       <li class="li_nc"><a href="#" >PMD (1 Year)</a></li> 
       <li class="li_nc"><a href="#" >M. Phil (1-2 Years)</a></li> 
       <li class="li_nc"><a href="#" >Ph.D (2-3 Years)</a></li> 
      </ul></li> 
      <li class="li_hc"><a href="#" >Marine & Maritime Sciences</a><ul class="ul_ch"> 
       <li class="li_nc"><a href="#" >MBA (1-5 Years)</a></li> 
       <li class="li_nc"><a href="#" >MBA (Maritime 2-5 Years)</a></li> 
       <li class="li_nc"><a href="#" >MBA (Maritime 3 Years)</a></li> 
       <li class="li_nc"><a href="#" >MSC (Geophysics 2 Years)</a></li> 
      </ul></li> 
      <li class="li_nc"><a href="#" >Graduate & Applie Sciences</a></li> 
      <li class="li_hc"><a href="#" >Humanities & Social Sciences</a><ul class="ul_ch"> 
       <li class="li_nc"><a href="#" >BSS (4 Years)</a></li> 
      </ul></li> 
      <li class="li_hc"><a href="#" >Medical & Dental Sciences</a><ul class="ul_ch"> 
       <li class="li_nc"><a href="#" >MBBS (5 Years)</a></li> 
      </ul></li> 
      <li class="li_hc"><a href="#" >Legal Studies</a><ul class="ul_ch"> 
       <li class="li_nc"><a href="#" >LLB (5 Years)</a></li> 
      </ul></li> 
      </ul></li> 
      <li class="li_hc"><a href="#" >ADMISSIONS</a><ul class="ul_ch"> 
      <li class="li_nc"><a href="#" >General Info</a></li> 
      <li class="li_nc"><a href="#" >Eligibility</a></li> 
      <li class="li_nc"><a href="#" >Admissions Procedure</a></li> 
      <li class="li_nc"><a href="#" >Freshmen Orientation</a></li> 
      <li class="li_nc"><a href="#" >How To Apply ?</a></li> 
      <li class="li_nc"><a href="#" >Prospectus</a></li> 
      </ul></li> 
      <li class="li_hc"><a href="#" >ACADEMICS</a><ul class="ul_ch"> 
      <li class="li_nc"><a href="#" >Semester System</a></li> 
      <li class="li_nc"><a href="#" >Examination System</a></li> 
      <li class="li_nc"><a href="#" >Course\Syllabus</a></li> 
      <li class="li_nc"><a href="#" >Faculty Evaluation</a></li> 
      <li class="li_nc"><a href="#" >Rules & Regulations</a></li> 
      <li class="li_nc"><a href="#" >Degree Recognition</a></li> 
      </ul></li> 
      <li class="li_hc"><a href="#" >FACILITIES</a><ul class="ul_ch"> 
      <li class="li_nc"><a href="#" >Student Support Facilities</a></li> 
      <li class="li_nc"><a href="#" >Laboratories</a></li> 
      <li class="li_nc"><a href="#" >Computer Laboratories</a></li> 
      <li class="li_nc"><a href="#" >Audio & Visual Facilities</a></li> 
      <li class="li_nc"><a href="#" >Medical Services</a></li> 
      <li class="li_nc"><a href="#" >Security Services</a></li> 
      <li class="li_nc"><a href="#" >Sports Facilities</a></li> 
      <li class="li_nc"><a href="#" >Study & Excursion Trips</a></li> 
      <li class="li_nc"><a href="#" >Cafeterias & Dinning</a></li> 
      </ul></li> 
      <li class="li_hc"><a href="#" >FACULTY</a><ul class="ul_ch"> 
      <li class="li_nc"><a href="#" >Islamabad Campus</a></li> 
      <li class="li_nc"><a href="#" >Karachi Campus</a></li> 
      </ul></li> 
      <li class="li_hc"><a href="#" >ABOUT</a><ul class="ul_ch"> 
      <li class="li_nc"><a href="#" >History</a></li> 
      <li class="li_nc"><a href="#" >Board Of Governers</a></li> 
      <li class="li_nc"><a href="#" >Constituent Units</a></li> 
      <li class="li_nc"><a href="#" >Affiliated Units</a></li> 
      </ul></li> 
      <li class="li_nc"><a href="#" >CONTACT US</a></li> 
      <li class="li_nc"><a href="#" >VIRTUAL TOUR</a></li> 
    </ul> 
    </div> 
    </td> 
</tr> 
</table>

這裏是CSS

/* pull-down mainmenu css */ 
.mainmenu{ 
    float : left; 
    width : 100%; 
    height : 30; 
    padding: 0; 

    margin-bottom:0; 
    margin-top:0; 
    margin-left:0; 
    margin-right:0; 
    border-width:0; 

} 
.mainmenu ul { 
    float: left; 
    width: 100%; 
    list-style: none; 
    line-height: 1; 
    color:#e0e0e0; 
    background: #474747; 
    padding: 0; 
    border: solid transparent; 
    border-width: 1px 0; 
    margin: 0 0 1em 0; 
} 

.mainmenu a, .mainmenu a:visited 
{ 
    display: block; 
    font-family:calibri; 
    font-size:13px; 
    font-weight:normal; 
    font-style:normal; 
    text-decoration:underline; 
    color: #e0e0e0; 
    text-decoration: none; 
    padding: 1em 1em; 
} 

.mainmenu ul ul a{ 
    width:100%; 
    height:100%; 
} 
.mainmenu ul a{ 
    width:1%; 
} 


.mainmenu li { 
    float: left; 
    margin:0; 
    padding:0; 
} 

.mainmenu ul li 
{ 
float:left; position:relative; 
} 

.mainmenu ul li a 
{ 
white-space:nowrap; 
} 

.mainmenu li ul { 
    position: absolute; 
    left: -999em; 
    height: auto; 
    width:15em; 

    background: #474747; 
    font-weight: normal; 
    border-width: 1px; 
    margin: 0; 
} 

.mainmenu li li { 
    width:15em ; 
} 

.mainmenu li li a{ 
    width:13em ; 
} 

.mainmenu li ul { 
    margin: 0; 
} 
.mainmenu li ul ul { 
    margin: -2.8em 0 0 13.5em; 
} 
.ul_ch, 
.mainmenu li:hover ul ul, 
.mainmenu li li:hover ul ul, 
.mainmenu li li li:hover ul ul, 
.mainmenu li li li li:hover ul ul, 
.mainmenu li li li li li:hover ul ul 
{ 
    left: -999em; 
} 
.mainmenu li:hover ul, 
.mainmenu li li:hover ul, 
.mainmenu li li li:hover ul, 
.mainmenu li li li li:hover ul, 
.mainmenu li li li li li:hover ul 
{ 
    left: auto; 
} 
.mainmenu li:hover>ul.ul_ch 
{ 
    left: auto; 
} 

.mainmenu li:hover{ 
    background: #0552a7; 
} 

.mainmenu li:hover a,.mainmenu li:hover a:visited,.mainmenu li:hover a:hover,.mainmenu li a:hover{ 
    color:#e0e0e0; 
} 
.mainmenu li:hover li a, .mainmenu li li:hover li a, 
.mainmenu li li li:hover li a, .mainmenu li li li li:hover li a, 
.mainmenu li:hover li a:visited, .mainmenu li li:hover li a:visited, 
.mainmenu li li li:hover li a:visited, .mainmenu li li li li:hover li a:visited 
{ 
    color:#e0e0e0; 
} 
.mainmenu li li:hover, .mainmenu li li li:hover, 
.mainmenu li li li li:hover , .mainmenu li li li li li:hover , .mainmenu li li li li li li:hover 
{ 
    background: #0552a7; 
    z-index:9999; 
} 
.mainmenu li li:hover a,.mainmenu li li li:hover a, 
.mainmenu li li li li:hover a, .mainmenu li li li li li:hover a 
{ 
    color: #e0e0e0; 
} 

.mainmenu ul ul a, .mainmenu ul ul a:visited, 
.mainmenu li li a, .mainmenu li li a:visited 
{ 
    color: #e0e0e0; 
} 
.mainmenu ul ul a:hover, 
.mainmenu li:hover li:hover a,.mainmenu li:hover li:hover a:visited , 
.mainmenu li:hover li:hover li:hover a,.mainmenu li:hover li:hover li:hover a:visited, 
.mainmenu li:hover li:hover li:hover li:hover a,.mainmenu li:hover li:hover li:hover li:hover a:visited , 
.mainmenu li:hover li:hover li:hover li:hover li:hover a,.mainmenu li:hover li:hover li:hover li:hover li:hover a:visited, 
.mainmenu li:hover li:hover li:hover li:hover li:hover li:hover a,.mainmenu li:hover li:hover li:hover li:hover li:hover li:hover a:visited{ 
    color: #e0e0e0; 
} 
.mainmenu li:hover li:hover li a,.mainmenu li:hover li:hover li a:visited , 
.mainmenu li:hover li:hover li:hover li a,.mainmenu li:hover li:hover li:hover li a:visited, 
.mainmenu li:hover li:hover li:hover li:hover li a,.mainmenu li:hover li:hover li:hover li:hover li a:visited, 
.mainmenu li:hover li:hover li:hover li:hover li:hover li a,.mainmenu li:hover li:hover li:hover li:hover li:hover li a:visited{ 
    color: #e0e0e0; 
} 


/* end of mainmenu css */

來源

2010-08-27 Moon

回答

4

IE6不支持:hover除鏈接或兒童選擇器外。

您的選擇：

  • 的JavaScript（我還沒有找過一段時間，但UDM4具有最少的問題，我已經看到了）。
  • 具有IE6用戶的基礎水平菜單
  • 涉及有條件的意見和桌子瘋狂的黑客
  • 在首位

來源

2010-08-27 06:00:57 Quentin

+0

看到我自己的答案 – Moon 2010-08-27 06:36:57

+0

我建立了一個CSS只表不使用drop down menu這在IE6中工作，正如David所說，它涉及使用表格的大量條件註釋。總的來說，雖然代碼起作用，但它體積龐大，不易維護。 我建議保持原樣，並在頁面中添加一個JavaScript下拉菜單。如果IE6啓用了JS，他們將獲得完整的菜單，如果JS被禁用，它將優雅地降級到大多數兼容的CSS菜單。 – Moses 2010-08-27 15:49:44

相關問題

 相關問題