I'm trying to create a menu similar to one I've seen on a website.
I have managed to do everything right, I just can not let it occupy the entire menu bar. Print1: link Print2: link
After much research I discovered that if I left
position: absolute;
left: 0; /* Ou "0px" */
right: 0; /* Ou "0px" */
This would work, but it did not work and stayed like the above prints, would I have another option?
Try this ...
<!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: link
I've made sure that each submenu for your "X-List" has a specific color.
When I remove these lines, it re-occupies everything. It without the lines of colors: link
Would there be another way for me to declare colors without interfering with right and left?
I was able to! I declare the colors in the submenu tag, it worked.
example:
<ul style="background-color: #333"></ul>