עזרה בhtml תצוגת block

[Sara Rivka]

יש לי קובץ CSS שעשיתי בו נקודת שבירה ב750px.
ברצוני שבנקודת שבירה זו לא יראו את התפריט אלא כשירחפו על תמונה מסויימת (burger).
יש לי שתי בעיות:
א. התפריט לא מוצג בblock. (למרות שהגדרתי אותו כך)
ב. התפריט מוצג רק כשמגדירים את הריחוף על div (headr).
אשמח לקבל עזרה בנושא, איך אני עושה שזה יהיה כמו שאני רוצה.

נ.ב.
זה ניתן במסגרת שיעורי בית, ושאלתי בנות נוספות, וא"א לא הסתדרה עם זה...

מצורף הקוד
index.html
style.css

[Sara Rivka]

לגבי השאלה הראשונה הסתדרתי.
(הייתי צריכה להגדיר את זה על ה.dropDown)
אשמח לתשובה לשאלתי השניה.

[Whenever]

לא הבנתי את השאלה השנייה, אפשר בבקשה לפרט קצת יותר?

[Sara Rivka]

@Whenever אני רוצה שבנקודת שבירה התפריט יעלם, וכאשר ירחפו על תמונה (burger), התפריט יוצג.
הבעיה שלי היא שאני מצליחה להגדיר את זה שהתפריט יוצג רק כאשר מרחפים על div, ולא על תמונה. (כשאני מגדירה את זה על תמונה, התפריט לא מוצג)

[ivrtikshoret]

@Sara-Rivka
העליתי את זה לפה:
https://jsfiddle.net/z4Lwynx9/
אצלי זה עובד מצוין.

[Sara Rivka]

@ivrtikshoret גם לי זה עובד שכאשר מרחפים על התמונה התפריט נפתח כי זה חלק מהdiv.
אני רוצה שזה יקרה רק כשירחפו על התמונה ולא כשירחפו על כל הdiv. (הdiv הוא header)

כרגע זה כך:

 header:hover nav{
        display: block;
        text-align: start;
        top: 8.5%;
    }

ואני רוצה שזה יהיה:

 #burger:hover nav{
        display: block;
        text-align: start;
        top: 8.5%;
    }

תבדוק ותראה שזה לא עובד.

[Whenever]

זה בגלל שברירת המחדל של גודל התמונה היא נכנסת לתוך חלק מהheader.
תגדירי את הגודל של התמונה,
הנה דוגמא:

#logo{
    direction: rtl;
    text-align: end;
    position: fixed;
    height: 200px;
    width: 100%;
}