Help with CSS - Position Right and Left

Asked

Viewed 121 times

0

I’m trying to create a menu similar to the one I saw on a website.

I managed to do everything right, I just can’t let it occupy the entire menu bar. Print1 : http://prntscr.com/bmbbp4 Print2 : http://prntscr.com/bmbcl9

After much research I discovered that if I let

position: absolute;
left: 0; /* Ou "0px" */
right: 0; /* Ou "0px" */

This would work, but it didn’t work and stayed like the prints above, I would have another option?

css positioning submenu
  • 1

    Boot a width: 100%, if the container has a padding will work if you have a padding...

  • I tried, it didn’t work.

3 answers

0

Try that one...

<!DOCTYPE html>
<html>
<head>
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    width:100%;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #111;
}
</style>
</head>
<body>

<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

</body>
</html>

source

  • It didn’t work, it was only on the left, instead of occupying the entire menu.

0

The problem occurred after adding these lines: http://prntscr.com/bmbpag

What I did so that each submenu referring to your "Listax" has a specific color.

When I remove these lines, it takes up everything again. He without the lines of colors: http://prntscr.com/bmbqd6

There would be another way for me to declare colors without interfering with the right and left?

0

I got it! I declared the colors in the tag referring to the submenu, it worked.

example:

<ul style="background-color: #333"></ul>

Browser other questions tagged css positioning submenu

You are not signed in. Login or sign up in order to post.