centre horizontal list with current code

[jonnyfreak]

i have a menu already built but need to expand it to centre in the div. I have seen a few helps and tried them but they dont seem to work



<div id="top"><div id="header">
<div align="center"><img src="../images/logo1.png" alt="12345" width="960" height="56"></div>
</div><div id="myMenu">
<ul>
<li><a href="../index.html">home</a></li>
<li><a href="../about-us.html">about us</a></li>
<li><a href="#">portfolio</a>
<ul>
<li><a href="../1.php">1</a></li>
<li><a href="../2.php">2</a></li>
<li><a href="../3.php">3</a></li>
<li><a href="../4.php">4</a></li>
</ul>
</li>
<li><a href="../contact.html">contact</a></li>
</ul>
</div></div>

the css


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

pre, code {
font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
font-size: 12px;
color: #333;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
pre { border: 1px solid #CCC; background-color: #EEE; color: #333; padding: 10px; overflow: scroll; }
code { padding: 2px 4px; background-color: #F7F7F9; border: 1px solid #E1E1E8; color: #D14; }
a:link {
color: #FFF;
}
a:visited {
color: #FFF;
}

#top #myMenu {
border-top-width: 1px;
border-top-style: solid;
border-top-color: #FFF;
vertical-align: bottom;
padding-left: 10px;
padding-bottom: 5px;
height: 30px;
background-image: url(../../images/bgWHite.png);
}

#top #myMenu ul {
list-style-type: none;
position: relative;
padding-top: 0px;
margin-top: 0px;
text-align: center;
}
#top #myMenu ul li {
float: left;
}
#top #myMenu ul ul {
display: none;
position: absolute;
}
#top #myMenu ul li a {
display: block;
color: #9B9A8A;
font-family: sans-serif;
font-size: 14px;
padding-right: 40px;
padding-bottom: 5px;
padding-left: 40px;
padding-top: 5px;
margin-top: 2px;
text-decoration: none;
}
#top #myMenu ul li a:hover {
color: #CCC;
background-color: #333;
}
#top #myMenu li:hover ul {
display: block;
background-color: #FFF;
z-index: 1;
}
#top #myMenu li ul li {
float: none;
}
#top #myContent {
clear: both;
padding: 10px 0;
}
h1 {
font-family: sans-serif;
margin: 10px 0 5px;
font-size: 1.1em;
}
p {
margin: 5px 0;
}

#top {
background-color: #9B9A8A;
}
#top #header {
padding-top: 0px;
padding-bottom: 0px;
margin-top: 0px;
margin-bottom: 0px;
padding-right: 10px;
padding-left: 10px;
border: 1px solid #FFF;
background-color: #9B9A8A;
}


any help would be appreciated

[Beverleyh]

Try
#top #myMenu ul li { display:inline-block } instead of float:left

BTW #top #myMenu .... isn't necessary. ids are specific so just #myMenu ... is fine.

[jonnyfreak]

Try
#top #myMenu ul li { display:inline-block } instead of float:left

BTW #top #myMenu .... isn't necessary. ids are specific so just #myMenu ... is fine.

hi i tried this but something very weird happened. the button with the drop down appears at the top of the div and all the other buttons appear below and dont work. its very disjointed

[Beverleyh]

the button with the drop down appears at the top of the div and all the other buttons appear below and dont work.
I'm not sure what your describing here but remember that the display:inline-block; setting is trickling down to all <li>s, so to get subs to list vertically again you need to counteract it by setting display:block; on child <li>s;
#top #myMenu li ul li { display:block; }

If you need more help, please provide a link to your page.

[jonnyfreak]

I'm not sure what your describing here but remember that the display:inline-block; setting is trickling down to all <li>s, so to get subs to list vertically again you need to counteract it by setting display:block; on child <li>s;
#top #myMenu li ul li { display:block; }

If you need more help, please provide a link to your page.

thats great, that done it. thanks again