Intro Section With Dropdown Navigation

Community feedback

• 

  Nelson•2,390

  @nelsonleonePosted almost 2 years ago

  Hello....well done on completing the challenge🎊 I noticed some things in your solution, i have some tips you should consider to make your solution better, or use for other solutions you would work on. -Firstly, let's correct the big links scaling your page. You shouldn't set a position fixed on the nav links, and it's scaling because you didn't align it *If you used flex align-items:center,baseline.......etc

  -Secondly, for the dropdown, it's best to write a clean code by making them sub-navs inside the parent list item.

      <ul class="sub-nav">
         <li>To do list</li>
         <li>Calender</li>
      </ul>
   </li>```
  
  
  You can decide to set a visibility none or display none on them
  Then display them when the parent list items is hovered on
  `li:hover li > .sub-nav{
     display: "block
  }`
  
  
  -You can use JS to change the source of the arrow images when the sub-nav is shown,
  ```subnav.forEach((subNav,index) => {
       if(subNav.style.display === "block"){
        arrow[index].style.tranform = "rotate(180deg)"
  }
  } )```
  Or use JS to change the src.
  Or
  use css to rotate it 180deg .
  Don't you think it's better than adding two images to the parent List item
  

  Marked as helpful

  0