Skip to content
Submitted over 2 years ago

I used CSS and Javascript to design web page.

Vedat Sözen•230
@vedatsozen
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Intro section with dropdown navigation
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

Solution retrospective

I just couldnt center <ul> in to the menus. classList.toggle() did not work. So i just could open menus but could not close them. I did not understand why toggle did not work. I used visibility:visible technic to show menus when click. If you have help for me to make page better, i am open to your opinions and helps Thank you.

Community feedback

  • Vedat Sözen•230
    @vedatsozenPosted over 2 years ago

    my ul is child of nav. There is not problem with it. Problem is classList.toggle doesn t work. I can show sub menu div but i can not hide it again.

    0
  • Nate•320
    @Ging3rmintPosted over 2 years ago

    I see the issue you have is the dropdown menus are not placed in the right location. What you need to do is to put the ul element inside the nav buttons. each nav button will have position: relative while each ul list will have position: absolute, top: calc(100% + 10px), left: 0, z-index: 2. Since the ul is a child of your Nav button, you can then use CSS hover to toggle its visibility.

    I suggest you read up about CSS position, transform and learn to use SCSS which is so much better for styling design like this.

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord