HTML and CSS horizontal menu

Question

Good guys, I’ve been programming for a while in Java and C#. So now I’m trying to improve more the Front-End part, and although I’ve read enough, when it comes to doing it is a little more complicated. So, I decided to make a site with some pages, only for study, using only HTML5 and CSS3, and of course, later I intend to use something Javascript and Jquery, if necessary.

Anyway, using HTML and CSS to do this is much more complicated than using a bootstrap of life, but I really want to learn how to move and not be so dependent on frameworks. The big problem is at the time of the horizontal menu, follows code below: HTML from the menu

<nav id="menu-principal-container">
    <h1><a href="index.html">Manual Front-End</a></h1>
    <ul id="menu-principal">
        <li><a href="#">HTML</a></li>
        <li><a href="#">CSS</a></li>
        <li><a href="#">JAVASCRIPT</a></li>
        <li><a href="#">TUTORIAIS</a></li>
    </ul>
</nav>

CSS from the menu

*{ margin: 0; padding: 0; font-family: Arial, Sans-Serif; }

body{ background-color: #ddd; }

header{ width: 100%; height: 50px; background-color: #000; }

menu-principal-container{ margin: 0px 50px; text-align: center; position: relative; }

menu-principal-container h1{ padding: 10px 0px; background-color: transparent; width: 250px; text-align:center; }

menu-principal-container h1 a{ color: #fff; text-decoration: none; }

menu-principal{ position: absolute; float: right; width: auto; display: block; }

menu-principal li{ display: inline-block; margin-top: 15px; }

menu-principal li a{ color: #fff; text-decoration: none; list-style: none; padding: 15px 50px; }

menu-principal li:hover a{ background-color: #fff; color: #ff0000; border-bottom: 3px solid #ff0000; }

the big problem is that because of that title there, all menu list items go down, even if I put the width of H1 only 250px.

Anyone have any tips? I’m not very experienced in this part of front-end.

Answer 1

I don’t quite understand your question, you want to leave the menus horizontal ? If that. Then put :

main menu li {

Display: inline-block;

Answer 2

*{ margin: 0; padding: 0; font-family: Arial, Sans-Serif; }

body{ background-color: #ddd; }

header{ width: 100%; height: 50px; background-color: #000; }

#menu-principal-container {
    margin: 0px 50px;
    text-align: center;
    position: relative;

    /* flexbox */
    display: flex;
    justify-content: space-between;
}

#menu-principal-container h1{ padding: 10px 0px; background-color: transparent; width: 250px; text-align:center; }

#menu-principal-container h1 a{ color: #fff; text-decoration: none; }

#menu-principal{ width: auto; display: block; }

#menu-principal li{ display: inline-block; margin-top: 15px; }

#menu-principal li a{ color: #fff; text-decoration: none; list-style: none; padding: 15px 50px; }

#menu-principal li:hover a{ background-color: #fff; color: #ff0000; border-bottom: 3px solid #ff0000; }

<nav id="menu-principal-container">
    <h1><a href="index.html">Manual Front-End</a></h1>
    <ul id="menu-principal">
        <li><a href="#">HTML</a></li>
        <li><a href="#">CSS</a></li>
        <li><a href="#">JAVASCRIPT</a></li>
        <li><a href="#">TUTORIAIS</a></li>
    </ul>
</nav>

I created an example using the flexbox technique, applying the Nav tag:

#menu-principal-container {
    margin: 0px 50px;
    text-align: center;
    position: relative;

    /* flexbox */
    display: flex;
    justify-content: space-between;
}

In the title:

#menu-principal-container h1{ padding: 10px 0px; background-color: transparent; width: 250px; text-align:center; }

Using flexbox, you do not need this property: width. Thus:

#menu-principal-container h1{ padding: 10px 0px; background-color: transparent; text-align:center; }

On the menu:

#menu-principal{ position: absolute; float: right; width: auto; display: block; }

Using flexbox, you don’t need these properties: position, float. Thus:

#menu-principal{ width: auto; display: block; }