Почему подменю HTML в неправильном положении?

Question

У меня есть HTML, CSS меню.

Я хочу суб меню центра к главному меню (ul.menu)

почему есть пространство слева?

ul.menu ли: парить уль уже определил левый: 0 и его ближайших родителей ul.menu, не понимаю, где это пространство взялось?

.menu-main-container { padding-bottom:52px; margin-top:-60px; margin:10px auto; } 
 
ul.menu { z-index: 597; text-align:center; position: relative;background: gray; width: 960px; margin:auto!important;} 
 
ul.menu li { display: inline-block; line-height: 2.1em; vertical-align: middle; zoom: 1; } 
 
ul.menu a { display:block; letter-spacing:2px; color:#333; font-size:13px; text-decoration: none; padding:0 35px; text-transform:uppercase; font-weight:normal !important;} 
 
ul.menu a:hover {background:#EFEFEF; color:#ad7f12} 
 
ul.menu, ul.menu li, ul.menu ul { list-style: none; margin: 0; padding: 0; color:#333; } 
 

 
ul.menu li:hover { position: relative; z-index:599; text-decoration:none; background:#EFEFEF; } 
 
ul.menu li:hover ul {} 
 
ul.menu ul { display: none; } 
 
ul.menu ul li { float: none; line-height:34px; margin:0; padding:0; display: inline-block;} 
 
ul.menu ul li a:hover{ } 
 
ul.menu ul li { top: -2px; left: 100%; } 
 
ul.menu li:hover ul { display:inline-block; position: absolute; top: 100%; left: 0; z-index: 598; width:1020px; background:red; }

<div class="" ="menu-main-container"> 
 

 
<ul class="menu"> 
 
<li><a href="#">Menu 1</a> 
 
<ul> 
 
<li><a href="#">Menu 1 Submenu item 1</a></li> 
 
<li><a href="#">Menu 1 Submenu item 2</a></li> 
 
<li><a href="#">Menu 1 Submenu item 3</a></li> 
 
</ul> 
 
</li> 
 

 
<li><a href="#">Menu 2</a> 
 
<ul> 
 
<li><a href="#">Menu 2 Submenu item 1</a></li> 
 
<li><a href="#">Menu 2 Submenu item 2</a></li> 
 
<li><a href="#">Menu 2 Submenu item 3</a></li> 
 
</ul> 
 
</li> 
 

 
<li><a href="#">Menu 3</a> 
 
<ul> 
 
<li><a href="#">Menu 3 Submenu item 1</a></li> 
 
<li><a href="#">Menu 3 Submenu item 2</a></li> 
 
<li><a href="#">Menu 3 Submenu item 3</a></li> 
 
</ul> 
 
</li> 
 
</ul> 
 

 
</div>

Answer 1

Он начинается с этого пробела, потому что он позиционируется из его родителя. Убрать это:

position: relative; 

Answer 2

Ближайший родитель не ul.menu, но ul.menu ли. Вот почему он не сосредоточен. Он основывает свое положение на ul.menu li. Изменение родительского элемента также не будет работать, вам придется использовать другой метод в сочетании с css для этого. jQuery или Javascript - лучшие решения здесь, на мой взгляд.