0

この質問は以前にいくつかの異なる回答で尋ねられたようですが、どれも私にはうまくいかないようです。

FF、Chrome、および IE9 で正常に動作する css ドロップダウン メニューがありますが、以前のバージョンの IE では、メニューがトップ レベルの右側に表示されるため、メニューの次の項目の下に表示されます。左の IE8 で右の FF については、下の画像を参照してください。

どうやら私は画像を投稿することを許可されていないので、画像を作成する必要があります。

CSS は次のとおりです。

#newmenu, #newmenu ul 
{ 
list-style: none; 
margin: 0; 
padding: 0 
}

#newmenu li 
{ 
float: left;
position: relative; 
white-space: nowrap 
}

#newmenu li a 
{ 
display: block; 
padding: 5px 20px; 
text-decoration: none; 
color: #13a 
}

#newmenu ul 
{ 
background: #fff; 
display: none; 
float: left;
position: absolute
}

#newmenu ul li 
{ 
background: #1c2659; 
float: none 
}

#newmenu ul ul 
{ 
top: -1px; 
left: 100%
}

#newmenu li.has_child 
{ 
background-image: url('img/down.gif'); 
background-position: right center; 
background-repeat: no-repeat; 
padding-right: 10px 
}

#newmenu li.hover  
{ 
background-color: #2b397b 
}}

ここに HTML:

                <ul id="newmenu" class="clear">


                <li><a href='index.html'><span class="menuText"><strong>Home</strong></span></a></li>
                <li><a href=''><span class="menuText"><strong>About Us &#9662;</strong></span></a>

                    <ul>

                        <li>&nbsp;</li>
                            <li><a href='profile.html'><span class="menuText">Profile</span></a></li>
                        <li><a href='people.html'><span class="menuText">People</span></a></li>
                            <li><a href='referencemap.html'><span class="menuText">Reference Map</span></a></li>
                            <li><a href='cpd.html'><span class="menuText">CPD</span></a></li>
                            <li><a href='inspiration.html'><span class="menuText">Inspiration Newsletter &#9656;</span></a>

                            <ul>

                                <li><a href='inspsubscribe.html'><span class="menuText">Subscribe</span></a></li>

                            </ul>

                        </li>                               
                        <li><a href='changingworld.html'><span class="menuText">Changing World Newsletter &#9656;</span></a>

                            <ul>

                                <li><a href='chansubscribe.html'><span class="menuText">Subscribe</span></a></li>

                            </ul>

                        </li>

                    </ul>

                </li>
                <li><a href=''><span class="menuText"><strong>Products &#9662;</strong></span></a>

                    <ul>

                            <li><a href='dalhem.html'><span class="menuText">Dalhem Panel </span></a></li>
                            <li><a href='geschwender.html'><span class="menuText">Geschwender &#9656;</span></a>

                            <ul>

                                <li><a href='locker.html'><span class="menuText">Lockers</span></a></li>
                                <li><a href='cubicle.html'><span class="menuText">Cubicles</span></a></li>
                                <li><a href='ductwall.html'><span class="menuText">Duct Walling</span></a></li>
                                <li><a href='vanity.html'><span class="menuText">Vanity Units</span></a></li>
                                <li><a href='accessories.html'><span class="menuText">Accessories</span></a></li>

                            </ul>

                        </li>
                            <li><a href='gustafs.html'><span class="menuText">Gustafs Panel System&#174;</span></a></li>
                            <li><a href=#><span class="menuText">Lighting &#9656;</span></a>

                            <ul>

                                <li><a href='architectural.html'><span class="menuText">Architectural</span></a></li>
                                <li><a href='event.html'><span class="menuText">Event</span></a></li>

                            </ul>

                        </li>
                            <li><a href='metra.html'><span class="menuText">Metra Electronic Locking</span></a></li>
                            <li><a href='nappychanger.html'><span class="menuText">Nappychanger </span></a></li>
                            <li><a href='oranit.html'><span class="menuText">Oranit</span></a></li>
                            <li><a href='texaa.html'><span class="menuText">Texaa Panels</span></a></li>
                        <li><a href='zsolnay.html'><span class="menuText">Zsolnay</span></a></li>

                    </ul>

                </li>
                <li><a href=''><span class="menuText"><strong>News &#9662;</strong></span></a>

                    <ul>

                        <li><a href='2012.html'><span class="menuText">2012</span></a></li>
                            <li><a href='2011.html'><span class="menuText">2011</span></a></li>
                            <li><a href='2010.html'><span class="menuText">2010</span></a></li>
                            <li><a href='2009.html'><span class="menuText">2009</span></a></li>

                    </ul>

                </li>
                <li><a href='contact.html'><span class="menuText"><strong>Contact Us</strong></span></a></li>

            </ul>

どんなアイデアもありがたく受け取った。ありがとうサラ

4

1 に答える 1

0 
#newmenu li.hover  
{ 
background-color: #2b397b 
}}

上記の行には、二重の閉じ括弧があります。それが何か関係があるかどうかはわかりません。

そして.hoverクラスですか、それとも疑似要素:hoverですか？

于 2013-01-11T17:50:19.713 に答える