CSS drop down menu error

Question

I have made a dropdown CSS menu and honestly can't figure out why it's getting indented...

Here is the screenshot:

If you see it is all aligned to the right no matter how I set the width.. :(

Here is the CSS:

(included all CSS but menu is: #mainMenu)

@charset "UTF-8";
/* CSS Document */

/* Background styling of all forms (should set is here) */

form#payment {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    background-color:#f7fca3;
    padding: 10px;
}

form {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    background-color:#d6f5df;
    padding: 10px;
}

/*styling for text inputs and password of homepage */

input[type="text"]#profile, textarea#profile, input[type="password"]#profile {

    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    margin-bottom: 5px;
    display: block;
    padding: 4px;
    border: solid 1px #35b459;
    width:365px;
}

input[type="text"], textarea, input[type="password"]#inputArea {

    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    margin-bottom: 5px;
    display: block;
    padding: 4px;
    border: solid 1px #35b459;
    width:300px;
}

p {
    font-family:Arial, Helvetica, sans-serif;
    color:#231f20;
}

h1 {
    font-family:Arial, Helvetica, sans-serif;   
    color:#231f20;
}

h2 {
    font-family:Arial, Helvetica, sans-serif;
    color:#231f20;  
}

h3 {
    font-family:Arial, Helvetica, sans-serif;
    color:#231f20;
}

/* Split homepage in two */

#span1 { 
    width: 330px; float: right; 
}

#span2 { 
    width: 390px; float: left; 
}

/* Homepage note */
#note {
    border-style:dashed;border-color:red;
}

/* Registration button link style */

.regbutton a:hover {
    color:#ff;
    text-decoration:none;
}
.regbutton a {
    color:#ff;
    text-decoration:none;
}

.regbutton a:visited{
    color:#ff;
    text-decoration:none;

}

div#steps {
        background-color:#f7fca3;
}

.regbutton
{
    position:absolute;
    color:#ff;
    background:#E76600;
    font-family:Arial, Helvetica, sans-serif;
    padding:6px;
    text-align:center;
    left:550px;
    bottom:30px;
}
.header{
    position:relative;
    width:650px;
    align:center;
    height:200px;
}
.logo{
    position:absolute;
    align:left;
    left:30px;
    top:50px
}
.menu{
    position:relative;
    align:center;   
    top:150px;
}
.content{
    width:800px;
    position:relative;
    align:center;

}
#holder{
    width:100%;
}
.homecontent{
    position:relative;
    width:700px;
    top:20px;
    height:500px;
}

a>div { display: none; }
a:hover>div { display: block; }

a span {display: none;} 
a:hover span#hovImg {
    position: relative;
    right: 0px;
    bottom: 0px;    
    display: block;
}

#mainMenu,
#mainMenu ul {
    list-style: none;
}
#mainMenu {
    float: left;
}
#mainMenu > li {
    float: left;
}
#mainMenu li a {
display: block;
    height: 2em;
    line-height: 2em;
    padding: 0 1.5em;
    text-decoration: none;
}
#mainMenu ul {
    position: absolute;
    display: none;
z-index: 999;
}
#mainMenu ul li a {
    width: 80px;
}
#mainMenu li:hover ul {
    display: block;
}

/* Main menu
--*/
#mainMenu {
    font-family: Arial;
    font-size: 12px;
    background: #2f8be8;
}
#mainMenu > li > a {
    color: #fff;
    font-weight: bold;
}
#mainMenu > li:hover > a {
    background: #f09d28;
    color: #000;
}

/* Submenu
--*/
#mainMenu ul {
    background: #f09d28;
}
#mainMenu ul li a {
    color: #000;
}
#mainMenu ul li:hover a {
    background: #ffc97c;
}

Answer 1

First of all, what browser are you viewing it in? I also suggest using firebug or some sort of add-on that helps you view the box method, as you can see if that is what's causing the problem in terms of margin, padding. and border issues. I'd like to see your html file and I can help your problem more efficiently. I also think it is a padding issue, though...

Try:

#mainMenu li a {
display: block;
    height: 2em;
    line-height: 2em;
    padding-right:.2em;   /*  <--   */
    text-decoration: none;
}

Answer 2

It is probably because of this, you are using CSS short-hand :

padding: 0 1.5em; /* Top-Bottom(0), Left-Right(1.5em) */

In

#mainMenu li a {
    display: block;
    height: 2em;
    line-height: 2em;
    padding: 0 1.5em;  <------ Here
    text-decoration: none;
}

Answer 3

ul elements have left padding by default in almost all browsers. Creating a JS Fiddle (http://www.jsfiddle.net) would be very helpful here. But try setting your

#mainMenu ul{
    padding: 0;
    margin: 0;
}