Center a submenu with CSS and pointers - css

Question

I have been reading and searching the whole day long. I even read this article and tried to work it out but with no success.
So, what I want to do is a CSS menu with sub menus and have the sub menus centered to the page. This is what I have done so far. What I want is that the submenus show up completely centered to the page. Is this possible?
Here's the HTML:
<div id="menu_panel">
<div id="menu_2border">
<div id="menu_section">
<div id='menu1'>
<ul>
<li class='first sub'><a href='#'><span>Hem</span></a>
<ul>
<li><a href='#'><span>Privat</span></a></li>
<li><a href='#'><span>Om Robust</span></a></li>
</ul>
</li>
<li class='sub'><a href='#'><span>Koncept</span></a>
<ul>
<li><a href='#'><span>Insikt</span></a></li>
<li><a href='#'><span>Koncept</span></a></li>
<li><a href='#'><span>Aktivering</span></a></li>
</ul>
</li>
<li class='sub'><a href='#'><span>Uppdrag</span></a>
<ul>
<li><a href='#'><span>Företag</span></a></li>
<li><a href='#'><span>Privat</span></a></li>
</ul>
</li>
<li class='sub'><a href='#'><span>Blogg</span></a>
<ul>
<li><a href='#'><span>Arkiv</span></a></li>
<li><a href='#'><span>Kategori</span></a></li>
</ul>
</li>
<li class='sub'><a href='#'><span>Om Robust</span></a>
<ul>
<li><a href='#'><span>Vad erbjuder vi?</span></a></li>
<li><a href='#'><span>Vilka är vi?</span></a></li>
</ul>
</li>
<li class='sub'><a href='#'><span>Kontakter</span></a>
</li>
</ul>
</div>
</div>
</div>
</div>
And the CSS:
#menu_panel {
width:100%;
height: 49px;
color:#4b4b4b;
display:block;
border-top:#efefef 1px solid;
}
#menu_2border {
width:100%;
border-top:#7a7a7a 1px solid;
}
#menu_section {
width: 960px;
height: 29px;
margin:auto;
padding: 0 0 0 30px;
color:#4b4b4b;
background-color:#fff;
}
#menu1 ul,
#menu1 li,
#menu1 span,
#menu1 a {
margin: auto;
padding: 0;
position: relative;
}
#menu1 {
height: 29px;
background: #fff;
margin:auto;
}
#menu1:after,
#menu1 ul:after {
content: '';
display: block;
clear: both;
}
#menu1 a {
background: #fff;
color: #4b4b4b;
display: inline-block;
font-size: 15px;
line-height: 29px;
padding: 0px 40px;
text-decoration: none;
}
#menu1 ul {
list-style: none;
/* float: left; */
}
#menu1 > ul > li {
float: left;
}
#menu1 li .mainmenu {
border-right:#d8d8d8 1px dotted;
}
#menu1 > ul > li:hover:after { /* faz as setas debaixo dos items do menu */
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
left: 50%;
bottom: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 7px solid #fff;
margin-left: -10px;
}
#menu1 > ul > li.sub {
border-right:#d8d8d8 1px dotted;
}
#menu1 > ul > li.first {
border-left:#d8d8d8 1px dotted;
}
#menu1 > ul > li:hover > a {
background: #efefef;
}
#menu1 .sub {
z-index: 1;
}
#menu1 .sub:hover > ul {
display: block;
background-color:#
}
#menu1 .sub ul { /* faz o formato das caixas do sub-menu */
display: none;
position: absolute;
width: 803px;
height: 189px;
margin:auto;
border-bottom: #dddddd 1px solid;
border-left: #dddddd 1px solid;
border-right: #dddddd 1px solid;
background: #FFF;
}
#menu1 .sub ul li {
*margin-bottom: -1px;
}
#menu1 .sub ul li a {
background: #fff;
filter: none;
font-size: 13px;
display: block;
line-height: 120%;
padding: 10px 30px;
}
Notice that there are pointing arrows in each item of the menu, and they should stay where they are. What should be centered are the big submenu rectangles.
Many thanks in advance!

Answer 1

I dont explicitly understand your situation, do you need something like this? If so, i will make clear understanding on it.
#menu1 .sub ul { /* faz o formato das caixas do sub-menu */
display: none;
position: absolute;
width: 803px;
height: 189px;
margin-left: -401.5px; /* width divided by 2 */
left: 50%;
border-bottom: #dddddd 1px solid;
border-left: #dddddd 1px solid;
border-right: #dddddd 1px solid;
background: #FFF;
}
Example / Screen Result

Answer 2

You need to apply absolute positioning to your drop down menu, and have it relate to your top-level menu by applying relative positioning only to it. That direct relationship means you can set your drop-down menu to left: 0 and right: 0, sticking it to the left-most side and right-most side respectively of the top-level menu regardless of where it appears in your HTML (ie. it will match the width of your top-level ul).
Because you have set position:relative to a number of items, and some of your code might be dependant on that, I can't easily change your code to make it work. However, I put together this quick demonstration on jsfiddle to illustrate my explanation. I hope it helps.