Hi there, I've been working on a site project for a little while; not too sure exactly what I've done but I can't seem to even edit my CSS list without it all either vanishing or breaking entirely. I'd like to have it just stretch the top of the screen and would be incredibly thankful to whoever can help!
/*Strip the UL of padding and list styling */
ul {
list-style-type: none;
margin: 0;
padding: 0;
position: absolute;
text-align: center;
}
/* Create a horizontal list with spacing */
li {
display: inline-block;
float: left;
margin-right: 10px;
position: center;
display: inline-block;
}
/*Style for menu links */
li a {
display: block;
border: double 6px;
border-color: darkseagreen;
min-width: 140px;
height: 50px;
text-align: center;
line-height: 50px;
font-family: cursive;
color: aquamarine;
background: #6b6969;
text-decoration: none;
}
/* Hover state for top level links */
li:hover a {
background: #c79816;
color: #fff;
}
/* Style for dropdown links */
li:hover ul a {
background: #e3ad19;
color: #fff;
height: 40px;
line-height: 40px;
}
/* Hover state for dropdown links */
li:hover ul a:hover {
background: #ad8413;
color: #ffffff;
}
/* Hide dropdown links until they are needed */
li ul {
display: none;
}
/* Make dropdown links vertical */
li ul li {
display: block;
float: none;
}
li ul li a {
width: auto;
min-width: 100px;
padding: 0 20px;
}
/* Display the dropdown on hover */
ul li a:hover + .hidden, .hidden:hover {
display: block;
}
#gf {
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
}
#gf img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 50%;
min-height: 50%;
}
This is the entirety of my CSS, hopefully its not too much; each part is annotated which I thought would help me but evidently not ':| many thanks to whoever takes their time to help!
Here's a screenshot of what it currently looks like:
