Jump to content

Horizontal List Stretch Assistance Required


Melford1

Recommended Posts

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:

fcc1385bc9fdb8bef9803c6d4ab00d2f.png

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...