Reputation: 309
I want to create a horizontal menu, which starts right on the top of the page, meaning I do not want to be any margin above it, but I do not know how to do that. I tried with top: 0; margin:auto;
, but it does not work... my CSS code is right here:
.menu1
{
position: absolute;
top: 0;
margin:auto;
left: 0;
right: 0;
width: 100%;
}
.menu1 ul
{
list-style-type: none;
padding: 0;
overflow: hidden;
height: 30px;
background-color: purple;
}
.menu1 li
{
float:left;
margin-right: 10px;
}
.menu1 li a
{
display: block;
color: white;
text-align: center;
padding: 8px 10px;
text-decoration: none;
}
.menu1 li a:hover
{
text-decoration: underline;
}
Upvotes: 0
Views: 56
Reputation: 290
You have two options.
1: *{margin:0px 0px; padding:0px 0px;}
2: Use Reset CSS
Upvotes: 0
Reputation: 1323
Add in style may it helps you
*{margin:0px 0px; padding:0px 0px;}
Upvotes: 0
Reputation: 838
Add margin:0; in .menu1 ul
and everything will be fine.
See the code below
thanks
.menu1
{
position: absolute;
top: 0;
margin:auto;
left: 0;
right: 0;
width: 100%;
}
.menu1 ul
{
list-style-type: none;
padding: 0;
overflow: hidden;
height: 30px;
background-color: purple;
margin:0;
}
.menu1 li
{
float:left;
margin-right: 10px;
}
.menu1 li a
{
display: block;
color: white;
text-align: center;
padding: 8px 10px;
text-decoration: none;
}
.menu1 li a:hover
{
text-decoration: underline;
}
<div class="menu1">
<ul>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
</ul>
</div>
Upvotes: 1