Help with CSS-Position Right and Left
I'm trying to create a menu that looks like one I saw on a website.
I managed to do everything right, I just can't leave it occupying the entire menu bar. Print1: http://prntscr.com/bmbbp4 Print2: http://prntscr.com/bmbcl9
After much research I found that if I left
position: absolute;
left: 0; /* Ou "0px" */
right: 0; /* Ou "0px" */
This would work, but it didn't work and stayed like the prints above, would I have another option?
3 answers
Try This 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>The problem occurred after adding these lines: http://prntscr.com/bmbpag
That I made so that each submenu referring to your "ListaX" has a specific color.
When I remove these lines, it takes up everything again. It without the lines of the colors: http://prntscr.com/bmbqd6
Would there be another way for me to declare the colors without interfering with right and left?
I did it! I declared the colors in the tag referring to the submenu, it worked.
Example:
<ul style="background-color: #333"></ul>