added header: removed browser error and made css look the same

This commit is contained in:
darkicewolf50 2024-03-26 23:20:36 -06:00
parent 2e19a51d1b
commit 2cb457ac74
2 changed files with 20 additions and 8 deletions

View File

@ -32,7 +32,7 @@ nav a {
}
nav a li {
background-color: none;
background-color: white;
padding: 0.5rem;
border: solid 1px gray;
}
@ -48,16 +48,30 @@ nav ul {
margin: 0px;
padding: 0px;
}
/* makes it so that the tags look the same whist having removing browser error */
.DropDownHeader {
display: inline-block;
background-color: white;
padding: 0.5rem;
border: solid 1px gray;
}
.DropDownHeader:hover {
background-color: gray;
}
.Hide {
display: none;
}
.DropDown {
cursor: default;
position: relative;
}
.DropDown a {
cursor: default;
}
/* makes dropdown visible */
.DropDown:hover .Hide {
display: block;

View File

@ -81,8 +81,8 @@ const Header = () => {
</Link>
<li className="DropDown">
{/* this link and li only exits for styling purposes */}
<Link>
<li>Club Membership & Upcoming Events</li>
<Link className="DropDownHeader">
Club Membership & Upcoming Events
</Link>
<ul className="Hide">
@ -98,11 +98,9 @@ const Header = () => {
</ul>
</li>
<li className="DropDown">
<Link>
<li>More</li>
</Link>
<Link className="DropDownHeader">More...</Link>
<ul className="Hide">
<Link>
<Link to={"/Gallery"}>
<li>Gallery</li>
</Link>
<Link>