Help for the personal portfolio webpage

Code Feedback
1

here is my code, setting up the dropdown Navbar but doesn’t work :’( anyone could hep?

2

Hey. First of all, when coding in Codepen try and use the panels. You don’t need a <!doctype>, <html>, <head> and <body> tags and you should keep your CSS in the CSS Panel.

Aside from that, your dropdown works fine, except you gave it a .dropdown-context class and in your CSS you’re referencing a .dropdown-content class. Adjusting the classes will make it work, but it will be cut off because you gave the <ul> a overflow:hidden;. Removing that should make everything work fine.

1 Like
3

it works!!! Lovely for the other tips too!!!Thank you very much noyb!!!

4

can i have one more question that…
why the background color of “contact” is gray while other two “about” and “portfolio” are red when my mouse move over them?

sorry that i am quite new to code pen , and have not much idea how to check my code~~
thank you so much for your time

5

It’s because of this declaration block:

  li a:hover:not(.active){
    background-color: #A4A4A4;
  }

You are telling it that every link that is hovered and hasn’t an .active class should be gray, and that’s what it’s doing. After that declaration, you have this one:

li a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}

that is making every link and .dropbtn class (child of .dropdown), be red on hover. Therefore, the only one that will be selected by the previous rule, would be the Contact link (because it doesn’t have an .active or .dropbtn class).

If you don’t want the .active link to be red on hover, remove the first declaration and add the :not in the second one like so:

li a:hover:not(.active), .dropdown:hover .dropbtn {
1 Like
6

great!! it works again, yeah yeah~
i try putting it all into one line like below:
li a:hover, a:hover:not(.active) .dropdown:hover .dropbtn {
background-color: #A4A4A4;
}

i just spot that my current link color stay on “about”,
i searched through the web seems i should delete the class=“active”, and just add below in CSS
:active{
background-color:#084B8A;
}

it doesn’t work :frowning: