CODEWITHSUNDEEP
css
digolira2
digolira2

Reputation: 411

nav elements not aligned + overlapping problem

I have two major problems with my code.

  1. Problem 1 - Alignment: Inside the <nav> I created two <div> tags. One for the logo, and one for the hyperlinks, but I can't manage to align then. I've been stuck on this for hours.
  2. Problem 2 - Overlapping: If the screen-size is a bit small, when I hover over an element of the navigation bar they overlap each other, which in theory is fine, however it doesn't cover the element behind, so both element keeps displaying. Is there a way to prevent this from happening? btw, this problem only happens when I'm using a small screen size.

The image below can illustrate both problems:

Problem illustrated

body{
    background-color: rgb(210,210,210);
    margin:0px;
    padding: 0px;
}

nav{
    background-color: rgb(97, 97, 97);
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right:10px;
    display: flex;
}

section{
    padding: 0 10%;
}

#Logo{
    width: 20%;
    height: inherit; 
    float: left;
    clear: left;
}

#Hyperlinks{
    width: 80%;
    float: right;
    text-align: right;
}

#Logo p{
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande';
    font-size: 120%;
    color: white;
    padding-left: 40px;
}

#Hyperlinks a{
    font-size: 1.2rem;
    text-align: center;
    text-decoration: none;
    color: white;
    padding-right: 5px;
}

#Hyperlinks li li>a{
    font-size: 1.1rem;
}

#Hyperlinks>ul>li:hover {
    background-color: rgb(27, 129, 107);
    border-radius: 0 0 10px 0;
}

#Hyperlinks ul li li:hover{
    background-color: rgb(27, 129, 107);
}

#Hyperlinks ul ul li:last-child{
    border-radius: 0 0 10px 0;
}

#Hyperlinks>ul>li>a{
    border-right:solid white 3px;
}

#Hyperlinks ul{
    padding-inline-start: 0;
}

#Hyperlinks>ul>li{
    display: inline-block;
    padding: 10px 50px 10px 2px;
    margin-right: 10px;
}

#Hyperlinks ul ul{
    display: none;
}

#Hyperlinks>ul>li{
    position: relative;
}

#Hyperlinks ul li:hover ul{
    display: block;
    position: absolute;
    width: 92%; 
    left: 0%; 
    top: 42px; 
    background-color: rgb(97, 97, 97);
    border-radius: 0 0 10px 0;
}

#Hyperlinks li:hover li{
    display: block;
    padding: 1em 0em 1em 5px;
    text-align: left;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Navigation Bar 3</title>
    <link rel="stylesheet" href="gabarito2.css">
</head>

<body>
    <header>
        <nav>
            <div id="Logo">
                <p>MySite.com</p>
            </div>
            <div id="Hyperlinks">
                <ul>
                    <li><a href="#" class="active">Home</a></li>
                    <li><a href="#">Tutorial</a>
                        <ul>
                            <li><a href="#">Tutorial 1</a></li>
                            <li><a href="#">Tutorial 2</a></li>
                            <li><a href="#">Tutorial 3</a></li>
                        </ul>
                    </li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Newsletter</a>
                        <ul>
                            <li><a href="#">News 1</a></li>
                            <li><a href="#">News 2</a></li>
                            <li><a href="#">News 3</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </div>

        </nav>
    </header>
    <section>
        <h2>Test</h2>
        <p>Hello, it`s just a test. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia, temporibus, culpa.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia, temporibus, culpa! Impedit amet voluptates reiciendis esse quisquam. Eum quia, facere laboriosam quos possimus, ratione, optio incidunt sunt dolorum commodi magni.</p>
    </section>


</body>
</html>

Upvotes: 0

Views: 171

Answers (1)

Robo Robok
Robo Robok

Reputation: 22673

  1. Get rid of all the floats and use flexbox exclusively. Make sure your ul and li have no default margins and paddings.

  2. Just set a background color and z-index if necessary.

Upvotes: 1

Related Questions