Question

还在学习很多..但基本上终于完成了我的网站，但现在我没能让它在所有浏览器中运行，在Chrome和Firefox中都很好，同时检查浏览器测试网站，在Opera中看起来也不错，但按照惯例，Internet Explorer拒绝播放，菜单只是无法加载所有内容。

这是Nav HTML;

 <div id="nav">
            <ul id="topnav" class="sf-menu">
                <li><a href="index.php"  class="current">Home</a></li>
                <li><a href="?page_id=645">About</a>
                    <ul>
                        <li><a href="?page_id=645">Gemini Global</a></li>
                        <li><a href="?page_id=647">Joe Davenport</a></li>


                        </li>
                    </ul>
                </li>
                <li><a href="?page_id=435">Services</a>
                                            <ul>
                        <li><a href="?page_id=623">Implement & Marketing</a></li>
                        <li><a href="?page_id=625">Analysis & Evaluation</a></li>   
                        <li><a href="?page_id=628">Bid Writing</a></li>


                        </li>
                    </ul>
                <li><a href="?page_id=38">News</a></li>

                <li><a href="?page_id=275">Contact</a></li>
            </ul><!-- #topnav -->
        </div><!-- #nav -->

这是CSS;

/*** TOP AREA & MENU ***/
#top{height:77px; clear:both}


#topsearch{ float:right; padding:25px 0 0 0}
#topsearch .inputbox{width:200px; padding:6px 5px; background:#fff url(../images/bg_searchtop.gif) repeat-x; border:solid 1px #fff; outline:solid 1px #eaeaea; color:#6e6e6e; font-size:12px;
    box-shadow: inset 0px 0px 0px #d3d3d3;
    -moz-box-shadow: inset 0px 0px #d3d3d3;
    -webkit-box-shadow: inset 0px 0px 0px #d3d3d3;

}


#nav{position:relative; z-index:100; clear:both; height:70px;}

#topnav{
    margin:0;
    padding:0;
    list-style-type:none;
    overflow:visible;
    position:relative;
    float:left;
    font-size:14px;
    font-family:"DroidSansRegular";
    text-transform:uppercase;
    background:url(../images/nav_line.gif) repeat-y  left top;
  }

.sf-menu > li{background:url(../images/nav_line.gif) repeat-y  right top; width:156.667px; text-align:center; margin:0; padding:0; height:54px; line-height:54px}

.sf-menu a:hover{color:#f0b028;}
.sfHover a, .sfHover a.sf-with-ul {color:#f0b028;}
.sfHover li a.sf-with-ul { color:#303030!important; }
.sf-menu ul li.sfHover > a { color:#303030; }
.sf-menu a {
    color:#303030; text-decoration:none!important;
    display:        block;
    position:       relative;
    padding:        0 !important;
    text-decoration:none;
    font-weight:normal;
}

.sf-menu li a.current{color:#0062a7;}

.sf-menu li li:last-child {
    border-bottom:1px solid #f4f5f5;
}
.sfHover{background:#ca0005;}


/* Drop down menu */
.sf-menu ul a:hover {
    background:transparent; 
}
.sf-menu li li {
    background:#f3f3f3 url(../images/bg_submenu.gif) repeat-x 0 -1px !important; 
    border-top:1px solid #e4e4e4;
    text-align:left;
    line-height:20px;
    font-size:12px;
    margin:0;
}
.sf-menu, .sf-menu * {
    margin:         0;
    padding:        0;
    list-style:     none;
    font-size:13px;

}
.sf-menu {
    line-height:100%;
    position:absolute;
    right:0;
    bottom:0;
    float:left;
}
.sf-menu ul {
    position:       absolute;
    top:            -999em;
    width:          27em; /* left offset of submenus need to match (see below) */
    border:solid 1px #e4e4e4;
    border-top:0;
}
.sf-menu ul li {
    width:          100%;
}
.sf-menu li:hover {
    visibility:     inherit; /* fixes IE7 'sticky bug' */
}
.sf-menu li {
    float:          left;
    position:       relative;
    margin:0;
}

.sf-menu li li{margin:0px 0px;}


.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
    left:           -2px;
    top:            4.4em; /* match top ul list item height */
    z-index:        99;

}
ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul {
    top:            -999em;
}
ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {
    left:           10em; /* match ul width */
    top:            -1px;
    margin-left:    0px;
}
ul.sf-menu li li:hover li ul,
ul.sf-menu li li.sfHover li ul {
    top:            -999em;

}
ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul {
    left:           10em; /* match ul width */
    top:            -1px;

}
.sf-menu ul li a{
    font-size:11px;
    padding:10px 25px 10px 25px!important;
    color:#303030;
}

.sf-menu ul li a:hover{}
.sf-menu li ul {
    padding:0px;
}
.sf-menu a.sf-with-ul {
    padding-right:  0px;
    min-width:      1px; /* trigger IE7 hasLayout so spans position accurately */
}
.sf-sub-indicator {
    position:       absolute;
    display:        block;
    right:          10px;
    top:            1.05em; /* IE6 only */
    width:          10px;
    height:         10px;
    text-indent:    -999em;
    overflow:       hidden;
}

Jsfiddle在这里 - ＆gt; http://jsfiddle.net/CsKtv/

Answer 1

更新您的html，如下所示。您的HTML导致问题。

<div id="nav">
        <ul id="topnav" class="sf-menu">
            <li><a href="index.php"  class="current">Home</a></li>
            <li><a href="?page_id=645">About</a>
                <ul>
                    <li><a href="?page_id=645">Gemini Global</a></li>
                    <li><a href="?page_id=647">Joe Davenport</a></li>   
                </ul>
            </li>
            <li><a href="?page_id=435">Services</a>
                     <ul>
                    <li><a href="?page_id=623">Implement & Marketing</a></li>
                    <li><a href="?page_id=625">Analysis & Evaluation</a></li>   
                    <li><a href="?page_id=628">Bid Writing</a></li>
                       </ul>
                    </li>

            <li><a href="?page_id=38">News</a></li>

            <li><a href="?page_id=275">Contact</a></li>
        </ul><!-- #topnav -->
    </div><!-- #nav -->

Answer 2

绝对不匹配的标签。 Check it out

我在IE8中对此进行了测试，并且一旦标签正确就可以正常工作。

下拉菜单不在IE中工作

2 个答案: