Nelly
Nelly

Reputation: 309

eliminate top space of a horizontal menu

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

Answers (4)

Dharmendra Bisht
Dharmendra Bisht

Reputation: 290

You have two options.

1: *{margin:0px 0px; padding:0px 0px;}

2: Use Reset CSS

Upvotes: 0

Anubhav pun
Anubhav pun

Reputation: 1323

Add in style may it helps you

*{margin:0px 0px; padding:0px 0px;}

Upvotes: 0

omarCreativeDev
omarCreativeDev

Reputation: 202

body, html, .menu { margin:0 auto; }

Upvotes: 0

Ajay Malhotra
Ajay Malhotra

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

Related Questions