Line 21: | Line 21: | ||
margin-top: 0; | margin-top: 0; | ||
margin-bottom: 0; | margin-bottom: 0; | ||
+ | } | ||
+ | |||
+ | nav a { | ||
+ | color: #364953; | ||
+ | font-size: 1.5em; /* cannot use em ecause it would be relative to the font size of the nav element which is 0 */ | ||
+ | text-decoration: none; | ||
+ | /*display: inline-block; /* the link is already "inline" so adding "block" puts it in the flow of the page and keeps it below the element before it */ | ||
+ | } | ||
+ | |||
+ | .drop-link { | ||
+ | display: inline-block; /* makes them be in line with other nav elements */ | ||
+ | border-left-style: solid; | ||
+ | border-left-width: thin; | ||
+ | transition-duration: 0.3s; | ||
+ | } | ||
+ | |||
+ | .drop-link:hover {} | ||
+ | |||
+ | .drop-link:hover > ul{ | ||
+ | display: block; | ||
+ | } /* make something happen when you hover over a nav item */ | ||
+ | |||
+ | .dropdown-content { | ||
+ | display: none; | ||
+ | position: absolute; /* positions the dropdown list relative to the first positioned ancester */ | ||
+ | list-style: none; | ||
+ | background-color: #FCC5BA; | ||
+ | padding-left: 0; /* gets rid of automatic padding on left */ | ||
+ | margin-top: 0.5rem; /* makes the submenus start where the nav ends, bc nav-list has a bottom padding of 0.5rem */ | ||
+ | /* lined up exactly with the "button" on top, not considering the border, which is why it is slightly to the right */ | ||
+ | /* already tried adding a thicker border to this but it still only starts where the "button" starts (not including its border) */ | ||
+ | z-index: 100; | ||
+ | } | ||
+ | |||
+ | |||
+ | .dropdown-content li:hover > a{ | ||
+ | text-decoration: underline; | ||
+ | } | ||
+ | |||
+ | .dropdown-content a { | ||
+ | text-decoration: none; | ||
+ | display: block; /* makes it so that we can actually use padding values */ | ||
+ | border: thin solid #E88A8A; | ||
+ | border-top: none; | ||
+ | font-size: 1em; | ||
} | } | ||
Revision as of 23:00, 29 May 2020