Question

我最近接管了一个朋友的网站，并且一直在处理为其构建的主题的乐趣（阅读：不好玩）。我目前的问题是菜单。下拉菜单的第一层是居中的，这很好，但第二层被推到右边，这是这个主题的问题。由于菜单更容易修复，这就是我想要攻击的内容，但我无法弄清楚要将菜单推到左边需要更改的内容。

这是我目前的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%（或类似的），您应该没问题。

用于下拉菜单的CSS，无论是居中还是左侧

1 个答案: