في الكود الذي قدمته، تقع مشكلة في ترتيب العناصر داخل القائمة وفي هيكل العناصر نفسها. لتحقيق الهدف المطلوب وهو عرض القائمة المنسدلة عند تحويم المؤشر فوق زر “About”، يجب إصلاح هذه الأخطاء. هناك أيضًا بعض الأخطاء النحوية في الكود، سأقوم بتصحيحها أيضًا لضمان عمل الكود بشكل صحيح.
أولاً، يجب عليك وضع العناصر ذات الصلة بالقائمة المنسدلة داخل عنصر
أعدت كتابة الكود بشكل صحيح بناءً على التوجيهات التي ذكرتها، وإليك الكود المصحح:
htmlhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Dropdown Menutitle>
<style>
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.goCenter {
text-align: center;
color: white;
}
body {
background-color: #1A1617;
}
ul {
text-align: center;
list-style-type: none; /* تصحيح الخطأ هنا */
margin: 0;
padding: 20px;
background-color: black;
overflow: hidden;
}
li {
display: inline;
}
li a {
color: white;
padding: 8px 16px;
text-decoration: none;
}
li a:hover {
background-color: red;
font-size: 10px; /* تصحيح الخطأ هنا */
}
.dropdown:hover .dropdown-content {
display: block;
}
style>
head>
<body>
<ul>
<li><a href="home.html">Homea>li>
<li><a href="news.html">Newsa>li>
<li class="dropdown">
<a href="about.html" class="dropbtn">Abouta>
<div class="dropdown-content">
<p>Checkp>
div>
li>
ul>
<p class="goCenter"><strong>strong>p>
body>
html>
أعتقد أن هذا الكود المعدل سيحقق النتيجة المطلوبة، حيث سيعرض القائمة المنسدلة بشكل صحيح عند تحويم المؤشر فوق زر “About”. تأكد من حفظ الملف واختبار الكود على متصفح الويب الخاص بك.
المزيد من المعلومات
بالطبع، دعني أكمل المقال لشرح الكود بشكل أكبر وتوضيح كيفية عمله:
بناء قائمة منسدلة بسيطة باستخدام HTML و CSS
تعتبر القوائم المنسدلة من العناصر الشائعة والمفيدة في تصميم صفحات الويب، حيث تتيح للمستخدمين الوصول السريع إلى العديد من الروابط أو الأقسام المختلفة في الموقع. في هذا المقال، سنتعلم كيفية إنشاء قائمة منسدلة بسيطة باستخدام HTML و CSS.
الخطوة 1: كتابة الكود HTML
أولاً، نبدأ بكتابة هيكل الصفحة باستخدام لغة HTML. يمكننا استخدام عنصر
لكل عنصر في القائمة، مع وضع الرابط المناسب داخل كل عنصر.html<ul> <li><a href="home.html">Homea>li> <li><a href="news.html">Newsa>li> <li class="dropdown"> <a href="about.html" class="dropbtn">Abouta> <div class="dropdown-content"> <p>Checkp> div> li> ul>في هذا الكود، قمنا بإنشاء قائمة رئيسية تحتوي على ثلاثة عناصر: “Home”، و”News”، و”About”. عند النقر على “About”، ستظهر قائمة منسدلة تحته.
الخطوة 2: تنسيق القائمة باستخدام CSS
الآن، سنستخدم CSS لتنسيق القائمة وجعلها تظهر بالشكل المطلوب. سنستخدم المحددات الواردة في الكود التالي لتحقيق ذلك:
css.dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); } .dropdown:hover .dropdown-content { display: block; }هنا، قمنا بتحديد العناصر
.dropdownو.dropdown-contentوتعيين خصائصها بشكل مناسب. عند تحويم المؤشر فوق “About”، سيتم عرض القائمة المنسدلة.dropdown-content.الخطوة 3: إضافة التنسيقات الإضافية
يمكنك أيضًا إضافة أي تنسيقات إضافية ترغب فيها لتخصيص المظهر الخاص بك. يمكنك تغيير الألوان والخطوط والأبعاد حسب الحاجة.
الاستنتاج
باستخدام HTML و CSS، يمكننا إنشاء قوائم منسدلة بسيطة وأنيقة لمواقعنا على الويب. يمكنك استخدام هذه القوائم لتنظيم المحتوى وتسهيل تجربة المستخدم في التنقل بين الصفحات. باستخدام المحددات الصحيحة والتنسيقات المناسبة، يمكنك تخصيص القوائم بحسب احتياجاتك ومتطلبات تصميم موقعك.
هذا هو المقال الكامل الذي يشرح كيفية إنشاء قائمة منسدلة بسيطة باستخدام HTML و CSS. آمل أن يكون هذا المقال مفيدًا لك في فهم كيفية بناء وتنسيق القوائم المنسدلة في مشاريعك القادمة.
