قائمة CSS المنسدلة لا تعمل

Question

لقد كنت أعمل على هذا القائمة المنسدلة لبعض الوقت الآن وقررت أنني غير قادر على القيام بذلك بنفسي. لقد غوغل العديد من الحلول ورأيت اثنين من البرامج التعليمية على YouTube لـ CSS تنزل القوائم ولكن بطريقة ما تعمل دائمًا مع الشخص المعني ولكن ليس بالنسبة لي. نأمل يمكنك مساعدتي.

وكانت المشكلات السابقة مع التعليمات البرمجية الأخرى هي التي تنطلق مثل النص الذي يدفع لأسفل أو أشياء أخرى تتحول من مكانها. هذا هو آخر فيديو جربته: http://www.youtube.com/watch؟v=_mdjwpzzkt8المشكلة في هذا الواحد هي أن قائمتي الفرعية لم تعد تظهر على الإطلاق. هذا هو المكان الذي توقفت فيه وقررت أنني بحاجة إلى مساعدة.

نأمل أن تتمكن من المساعدة في الكود الخاص بي!

رمز CSS لدي الآن:

#topnav         { z-index:3;
                    padding-top:76px; }

#topnav ul li       { list-style-type:none; 
                    display:inline;
                    float:right;
                    }


#topnav ul li a     { font-family:Arial, Helvetica, sans-serif;
                        font-size:13px;
                        font-weight:bold;
                        text-decoration:none;
                        padding-left:15px;
                        }

#topnav ul li a:link        { color:#00aeef; }
#topnav ul li a:visited     { color:#00aeef; }
#topnav ul li a:active      { color:#f26532; }
#topnav ul li a:hover       { color:#f26532; }
#topnav ul li a:focus       { color:#f26532; }

#topnav li ul           { position:absolute;
                                left:-999em;
                                list-style-type:none;
                                }

#topnav li ul li            { border-top:0px;
                                clear:both;}

#topnav li:hoover ul        { left:auto; }

رمز HTML الذي أحمله الآن:

<div id="topnav">
                <ul>
                    <li><a href="contact.html">CONTACT</a></li>
                    <li><a href="blog.html">BLOG</a></li>
                    <li><a href="over ons.html">OVER ONS</a></li>
                    <li><a href="gedragsbeinvloeding.html">GEDRAGSBEINVLOEDING</a></li>
                    <li><a href="onze diensten.html">ONZE DIENSTEN</a>
                        <ul>
                            <li><a href="onderzoek.html">ONDERZOEK</a></li>
                            <li><a href="advies.html">ADVIES</a></li>
                            <li><a href="lezingen.html">LEZINGEN</a></li>
                        </ul>                       
                    </li>
                    <li><a href="index.html">HOME</a></li>
                </ul>
            </div>

Answer 1

عندك li:hoover. هذا ينبغي أن يكون li:hover

http://jsfiddle.net/68zkk/