Please help me with this!

1

I am trying to create a dropdown menu that gets displayed on hover, but having issues with the way it’s rendering or showing up on completion.
Sorry for including such long code but I just can’t put it on github right now.
Also, I believe that the issue might be related to the positioning and display of the items but not sure. Hope that makes sense.
Thanks!!

HTML here…

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <title>MOBIL</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <a href="" class="logo">MOBIL</a>
        <ul class="navbar">
            <li><a href="#" class="link">spotlight</a>
                <ul class="container">
                    <li><a href="#">home</a></li>
                    <li><a href="#">home</a></li>
                    <li><a href="#">home</a></li>
                </ul>
            </li>
            <li><a href="#" class="link">about</a>
                <ul class="container">
                    <li><a href="#">home</a></li>
                    <li><a href="#">home</a></li>
                    <li><a href="#">home</a></li>
                </ul>
            </li>
        </ul>
        </header>
        <main>
                <h1>SMARTPHONE<br>SHOWDOWN</h1>
            </main>
</body>
</html>

CSS here…

@import url('https://fonts.googleapis.com/css?family=Luckiest+Guy');

*{
    margin: 0;
    padding: 0;
    font-family: 'Courier New', Courier, monospace;
    background-color: #fff;
}

body{
    padding-top: 1px;
}

header{
    padding: 30px;
    position: fixed;
    width: 100%;
}

a{
    text-decoration: none;
}

.logo{
    font-size: 30px;
    font-weight: 800;
    color: black;
    margin-left: 200px;
}

.navbar {
    float: right;
    list-style-type: none;
    margin-right: 200px;
    margin-top: 5px;
}   

.navbar li{
    display: inline-block;
}

.link{
    font-size: 20px;
    display: inline-block;
    color: #000;
    margin-left: 50px;
}

.link::after{
    margin-top: 2px;
    content: '';
    height: 1px;
    width: 0%;
    transition: all .2s;
    background-color: red;
    display: block;
}

.link:hover::after{
    width: 100%;
    transition: all .4s;
}


.container{
    list-style: none;
    margin-left: 50px;
    box-shadow: 2px 4px 10px rgba(0,0,0,.1);
}

.container li{
    display: none;
    padding: 5px;
    text-align: center;
}

.navbar li:hover li{
    display: block;
}

h1{
    font-family: 'Luckiest Guy';
    font-size: 100px;
    background-image: url('./assets/images/text-bg.jpg');
    background-size: cover;
    background-position: center;
    text-align: center;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    font-weight: 900;
}

main{
    margin-top: 200px;
}
2

https://codepen.io/jenovs/pen/zXVZgd?editors=1100

1 Like
3

ahhh! Flexbox works wonders…
Thank You so much! I just can’t thank you enough.
It’s been a long time since I’ve worked towards development and you definitely motivated me.
Thanks again!!

4

BTW, was that markup alright??

5

Also, it would be great if you could elaborate a little bit on the actual issue.

6

I didn’t change anything in the markup.

What I did is set .container position to absolute so it gets taken out of the normal flow (I also set .link position to relative for it to work) and that’s basically it.

7

Thank You!! But what I meant to ask was whether the markup could be considered right.

8

According to https://validator.w3.org/nu/#textarea the markup is valid.

Although you could wrap navigation in <nav> tag to make it more semantic.

9

Ok.
Thank You for your time.