Difference between revisions of "Template:Queens Canada/Styles"

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