Menu changing page content

Question

Speak guys, I am producing a Site and I made an HTML + CSS Menu, the only problem is that the Menu is changing the positioning of the things that are below it, example: If there is a menu and below there is a < p> Test < /p> when scrolling the menu options, it changes the positioning of < p>, has the menu to write the items that are below it? for example, there is the menu and below there is the < H1 > TITLE < /H1>, when selecting an item with the same submenu about write the < H1> This is my css code:

#nav{
    float: left;
    margin: 100px;
    margin-top: -2px;
    margin-right: 120px;
    margin-left: 340px;
}

#nav ul {

    font: 16px arial, tahoma, verdana;

    list-style: none;

    margin: 0;

    padding: 0;

}

 

#nav ul li {

    float: left;

   position: relative;

    display: block;

}

 

#nav ul li a {

    color: #555;

    background: #FFF;

    text-decoration: none;

    margin: 0 1px;

    padding: 15px 20px;

    border-top: 1px solid #555;

    display: block;

}
#nav li ul {
    display: none;
}
#nav ul li a:hover {
    background: #066;
    color: #FFF;
}
#nav li:hover ul {
    display: block;
    position: relative;
}
#nav li:hover li {
    float: none;
    font-size: 12px;
}
#nav li:hover a {

    background: #333;
    opacity: 0.5;
    color: #FFF;
}
#nav li:hover li a:hover {
    background: #222;
}
#textos{
    height: 500px;
}s

Answer 1

Good morning @Thinking.

I’m trying to understand what you really want.

You have a menu and underneath content, when you open the submenus it is pushing the correct content?

You need to work with submenu with position Absolute. I set an example, I hope I’ve helped.

Follow the link below.

https://codepen.io/danilorb/pen/opGJGa