Centering my drop down menu using css

[vpatterson]

I need to center my text and my drop down menu, using CSS and I cannot figure it out. I have tried multiple thing and nothing is working!

here is my CSS code:

#menu:after {clear:both;}

ul {

font-family: Arial, Verdana;

font-size: 14px;

margin: 0;

padding-bottom: 60px;

list-style: none;

}

ul li {

display: block;

position: relative;

float: left;

}

li ul {

display: none;

}

ul li a {

display: block;

text-decoration: none;

color: #ffffff;

border-top: 1px solid #ffffff;

padding: 5px 15px 5px 60px;

background: #1e7c9a;

margin-left: 1px;

 

}

ul li a:hover {

background: #3b3b3b;

}

li:hover ul {

display: block;

position: absolute;

}

li:hover li {

float: none;

font-size: 11px;

}

li:hover a { background: #3b3b3b; }

li:hover li a:hover {

background: #1e7c9a;

}

 

And my drop down menu code:

 

 

 

• Floor Closers

  • P-Floor Closers

  • BP-Floor Closers
  • A-Floor Closers
  • F-Floor Closers
  • H-Floor Closers
  • Slimline-Floor Closers

• Over Head Conceled Closers

  • P-Over Head Conceled Closers

  • BP-Over Head Conceled Closers
  • A-Over Head Conceled Closers
  • F-Over Head Conceled Closers
  • H-Over Head Conceled Closers

• Side Lites

   

 

 

Can someone please help me? photo attached as well.

[vpatterson]

The closest to center I can get is by changing the padding but it is not truly center.

 

 

My new code is:

.center

{

margin-left:36.5%;

margin-right:50%;

width:30%;

background-color:#b0e0e6;

text-align: center;

vertical-align: middle;

}

ul {

padding:0;

margin:0;

list-style: none;

background:#000;

height:36px;

text-align:center

 

 

}

 

ul li {

float:left;

position:relative;

 

}

 

a:link, a:visited {

text-decoration: none;

color: #FFF;

font-weight:bold;

}

ul li a, ul li a:visited {

display:block;

color:#fff;

width:auto;

height:auto;

line-height:20px;

padding:10px;

text-align:center;

 

}

 

ul li a:hover {

display:block;

color:#000;

background:#FFF;

line-height:20px;

padding:10px;

}

 

ul li ul, ul li:hover ul li ul {

display: none;

}

 

ul li:hover ul {

display:block;

position:absolute;

top:auto;

left:0;

height:auto;

 

}

 

ul li:hover ul li a {

display:block;

text-align:center;

border-bottom:1px solid #FFF;

 

}

 

 

ul li:hover ul li:hover ul {

display:block;

position:absolute;

left:124px;

top:0;

 

}

 

 

 

 

 

 

Navigation code is :

 

 

 

• Floor Closers

  • P-Floor Closers

  • BP-Floor Closers
  • A-Floor Closers
  • F-Floor Closers
  • H-Floor Closers
  • Slimline-Floor Closers

• Over Head Conceled Closers

  • P-Over Head Conceled Closers

  • BP-Over Head Conceled Closers
  • A-Over Head Conceled Closers
  • F-Over Head Conceled Closers
  • H-Over Head Conceled Closers

• Side Lites

   

 

 

I need the navigation bar to be truly centered...

Please HELP?

[steven-g]

Which browser are you using, because in IE9 it looks pretty good, Chrome is another matter, I'll take a look later. In the meantime could you go back to your posts and wrap the code in code tags - it does make copying the text much easier.

[vpatterson]

I am not sure what you mean by wrapping my code, but it will mainly be used in I.E. not quite sure of the version. His computer is pretty old, the site I am creating will never be hosted online, just used for easier access to the information for employees.

[steven-g]

My new code is:

.center

{

margin-left:36.5%;

margin-right:50%;

width:30%;

background-color:#b0e0e6;

text-align: center;

vertical-align: middle;

}

Try swapping out the first 3 lines for a float

.center
{
float: left;
background-color:#b0e0e6;
   text-align: center;
vertical-align: middle;
}

And the wrapping code means doing as I did above, use the "#" symbol when you are writing your post. It just makes things easier to read and use.

[vpatterson]

That didn't work. it left aligned it.

[steven-g]

It works fine here (which I know doesn't help you), if the computer is that old it is probably the browser that doesn't support certain parts of your code. I have attached my files just in case I did change anything else without remembering, but you might have to either try and update to a newer browser, or search for older versions of the things you are trying to do.

index-html.txt

style-css.txt

[vpatterson]

my version of I.E. is up to date and it doesn't seem to work on mine. Its ok I shall keep the padding until I figure it out thank you for your help anyway.