title: Center a submenu with CSS and pointers
body: <p>I have been reading and searching the whole day long. I even read <a href="https://stackoverflow.com/questions/9577616/css-center-submenu-wordpress">this article</a> and tried to work it out but with no success.</p>
  
  <p>So, what I want to do is a CSS menu with sub menus and have the sub menus centered to the page. <a href="http://art-ebox.com/robust_final/" rel="nofollow noreferrer">This is what I have done so far</a>. What I want is that the submenus show up completely centered to the page. Is this possible?</p>
  
  <p>Here's the HTML:</p>
  
  <pre><code>&lt;div id="menu_panel"&gt;
    &lt;div id="menu_2border"&gt;
      &lt;div id="menu_section"&gt;
        &lt;div id='menu1'&gt;
          &lt;ul&gt;
            &lt;li class='first sub'&gt;&lt;a href='#'&gt;&lt;span&gt;Hem&lt;/span&gt;&lt;/a&gt;
              &lt;ul&gt;
                &lt;li&gt;&lt;a href='#'&gt;&lt;span&gt;Privat&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href='#'&gt;&lt;span&gt;Om Robust&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/li&gt;
            &lt;li class='sub'&gt;&lt;a href='#'&gt;&lt;span&gt;Koncept&lt;/span&gt;&lt;/a&gt;
              &lt;ul&gt;
                &lt;li&gt;&lt;a href='#'&gt;&lt;span&gt;Insikt&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href='#'&gt;&lt;span&gt;Koncept&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href='#'&gt;&lt;span&gt;Aktivering&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/li&gt;
            &lt;li class='sub'&gt;&lt;a href='#'&gt;&lt;span&gt;Uppdrag&lt;/span&gt;&lt;/a&gt;
              &lt;ul&gt;
                &lt;li&gt;&lt;a href='#'&gt;&lt;span&gt;Företag&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href='#'&gt;&lt;span&gt;Privat&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/li&gt;
            &lt;li class='sub'&gt;&lt;a href='#'&gt;&lt;span&gt;Blogg&lt;/span&gt;&lt;/a&gt;
              &lt;ul&gt;
                &lt;li&gt;&lt;a href='#'&gt;&lt;span&gt;Arkiv&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href='#'&gt;&lt;span&gt;Kategori&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/li&gt;
            &lt;li class='sub'&gt;&lt;a href='#'&gt;&lt;span&gt;Om Robust&lt;/span&gt;&lt;/a&gt;
              &lt;ul&gt;
                &lt;li&gt;&lt;a href='#'&gt;&lt;span&gt;Vad erbjuder vi?&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href='#'&gt;&lt;span&gt;Vilka är vi?&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/li&gt;
            &lt;li class='sub'&gt;&lt;a href='#'&gt;&lt;span&gt;Kontakter&lt;/span&gt;&lt;/a&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt; 
  </code></pre>
  
  <p>And the CSS:</p>
  
  <pre><code>#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 &gt; ul &gt; li {
  float: left;
  }
  
  #menu1 li .mainmenu {
  border-right:#d8d8d8 1px dotted;
  }
  
  #menu1 &gt; ul &gt; 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 &gt; ul &gt; li.sub {
  border-right:#d8d8d8 1px dotted;
  }
  
  #menu1 &gt; ul &gt; li.first {
  border-left:#d8d8d8 1px dotted;
  }
  
  #menu1 &gt; ul &gt; li:hover &gt; a {
  background: #efefef;
  }
  
  #menu1 .sub {
  z-index: 1;
  }
  
  #menu1 .sub:hover &gt; 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;
  }
  </code></pre>
  
  <p>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.</p>
  
  <p>Many thanks in advance!</p>