下拉菜单的 CSS 居中和左侧

Question

我最近接管了一个 friend 的网站，并在处理为它构建的主题方面度过了一段有趣的(阅读:不好玩)时间。我当前的问题是菜单。下拉菜单的第一层居中，这很好，但第二层被推到右边，这是这个主题的问题。由于菜单更容易修复，这就是我试图解决的问题，但我无法弄清楚要更改什么才能将菜单推到左侧。

这是我当前的 CSS:

    .menu-maine-menue-container {
width: 990px; 
margin-left: auto;
margin-right: auto;
font-weight: bold;

}

.menu-maine-menue-container ul {
 clear:left;
   float:left;
 list-style:none !important; 
   margin:0;
        padding: 8px 0px 0px 0px;
   position:relative;
   left:50%;
   text-align:center;

}

.menu-maine-menue-container ul li {
 list-style:none !important; 
 position:relative;
   right:50%;
   padding: 0px 22px 8px 22px;
    float: left;
    font-weight: normal;
color: #fbfbd5;
text-shadow: rgb(0, 0, 0) 2px 2px 0px;
font-family: 'Sohoma';
font-size: 20px;
text-transform: uppercase;
letter-spacing: .05em;

}

.menu-maine-menue-container ul li:first-child {
 padding-left: 0px ;
} 



.menu-maine-menue-container ul li a {
color: #fbfbd5;
}

.menu-maine-menue-container ul li a:hover {
color: #d5f4ed !important;
text-decoration: none;
text-shadow: rgb(0, 0, 0) 2px 2px 3px;
}

.current-menu-item a, .menu-maine-menue-container ul li a:active {
color: #d5f4ed !important;

}

.menu-maine-menue-container ul li a:active {
text-shadow: none !important;
}


/* SUB MARINE MENUZ */


.menu-maine-menue-container ul ul {
list-style: none;
margin:0; /* Appear just below the hovering list */
padding:0;
width:220px; /* specify the width. */
position:absolute; /* needed */
z-index:500; /* specify the order */

}

.menu-maine-menue-container ul li ul {
top:27px; /* Positioning:Calc with top level horz list height */

}

.menu-maine-menue-container ul ul ul {
top:0;
left:100%; /* Position the sub menus to left. */
}

.menu-maine-menue-container ul li ul li {
float:left; 
   padding: 12px 8px 9px 8px !important;
margin-left: auto; margin-right: auto;
background: #eb5a4e;
width: 200px;
text-align: center !important;
}

 .menu-maine-menue-container ul li ul li:last-child {
padding-bottom: 15px;
}

.menu-maine-menue-container ul li li a {
font-size: 17px;          
line-height: 19px;
text-align: center !important;
width: 200px;
}


/* Drop Down! */

/* Hide all the dropdowns (submenus)  */
.menu-maine-menue-container ul ul,
.menu-maine-menue-container ul li:hover ul ul,
.menu-maine-menue-container ul ul li:hover ul ul
{ display: none;}

/* Display the submenus only when li are hovered */
.menu-maine-menue-container ul li:hover ul,
.menu-maine-menue-container ul ul li:hover ul ,
.menu-maine-menue-container ul ul li ul li:hover ul
{ display: block;}

站点是freejeremy.net问题的领域是“支持”和“囚犯团结”。

Answer 1

您需要更改的规则是 .menu-maine-menue-container ul ul ul 其中有 left:100%

将 100% 更改为 -50%(或类似的)，您应该没问题..