تقدم هذه المقالة أمثلة على شريط القائمة الثاني الذي يستخدم HTML+CSS لتنفيذ الماوس.
أولا في رسم التأثير:
1. الماوس ليس أعلاه
2. ضع الماوس في القائمة الأولى وتوسيع القائمة الثانوية
3. ضع الماوس في القائمة الثانوية
شفرة:
<html> <head> <title> اختبار القائمة على المستوى الثاني </title> <meta charset = utf-8> <style type = text/css>/*من أجل جعل القائمة في الوسط*/body {padding {padding -TOP: 100px ؛ ------------------------------------------------- ------------------------------------------------- ------------------------------------------------- ---------------------- * / .Menudiv {الحدود: 2px Solid #AAC ؛ Downline من العلامات* / .menudiv a {text-decics: none ؛} /* ul and li style* / .men udiv ul ، .menudiv li {list: none ؛ تعويم: اليسار ؛} /* قم بتعيين القائمة المطلقة على المستوى الثاني ، وإخفاء* /.menudiv> ul> all {position: Absolute ؛ /.menudiv> li> ul> li {float: none ؛} /* mouse الموضوعة في القائمة الأولى ، مع عرض القائمة الثانوية* /.menudiv> ul> li: hover ul {display: block ؛} /* 1 القائمة على المستوى* /. } /* في القائمة من المستوى الأول ، المربع الأيسر الأول* /.menudiv> li: أول child> a {border-hered: none ؛} /* في القائمة من الدرجة الأولى ، نمط الماوس الموضع* /.menudiv> ul> a: hover {color: #f0f ؛ Line-Leghity: 36px color ؛ إعداد الإطار العلوي* / .menudiv> li> li: أول child> a {top-top: 1px solid #ccc ؛} /* في القائمة الثانوية ، يتم وضع نمط الماوس* / .menudiv> ul ul > li> a: hover {color: #a4f ؛ -- نهاية ----------------------------------------------- ------------------------------------------------- ------ body> <! class = menudiv> <ul> <li> <a href =#> قائمة واحدة </a> <ul> <li> <a href =#> اثنين من القائمة ذات المستوى </a> </li> <a href = #> القائمة الثانوية </a> </li> <li> <a href =#> القائمة ذات المستوى الثاني </a> </li> </ul> </li> <li> <a href =#> القائمة اثنين </a> <ul> <li> <a href =#> قائمة المستوى الثاني </a> </li> <li> <a href =#> اثنين من القائمة -المستوى </a> </li > </li> <li> <li> <a href =#> قائمة ثلاثة </a> <ul> <li> <a href =#> القائمة الثانوية </a> </li> <a href =# > قائمة ثانوية </a> </li> <li> <a href =#> القائمة ذات المستوى الثاني </a> </li> <li> <a href =#> القائمة الثانوية </a> </li > <li> <a href =#> second -lovel menu </a> </li></ul> </li> <li> <a href =#> menu 4 </a> </li> < قائمة HREF =#> خمسة </a> <ul> <li> <a href =#> القائمة الثانية </a> </li> <li> <a href =#> القائمة الثانية </a> <////////////.6 li> <li> <a href =#> II القائمة </a> </li></ul> </li> </ul> </viv> <! --- -------- النهاية -----------> </body> </html>ما سبق هو كل محتويات هذا المقال.