css - 导航栏等宽且文本居中

Question

我查看这个论坛上的帖子已经有一段时间了，最​​后决定我需要一些定制的 CSS 帮助。

背景:我正在 drupal 主题中编辑 CSS 以根据我的需要对其进行自定义，我希望导航/菜单栏的宽度相等，我已经完成了一半，但第二个子菜单显示出巨大的差距.其次，我想让菜单栏中的文本居中对齐。

1. 菜单栏等宽A。消除子菜单中的空白
2. 居中对齐菜单栏文本。

非常感谢您的帮助，我是 CSS 的新手!

---

/* Navigation menu*/
#navigation ul, #navigation ul li,
#navigation ul.sf-menu, #navigation ul.sf-menu li { float: left; margin: 0; padding: 0;      }

#navigation ul, #navigation ul.sf-menu { width: 100%;
border-color: #EAEAEA #F5F5F5 #F5F5F5 #F5F5F5;
-moz-border-radius: 5px 5px 5px 5px; -webkit-border-radius: 5px 5px 5px 5px; border-           radius: 5px 5px 5px 5px;
border-style: solid; border-width: 1px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); 
/* IE10 */ 
background-image: -ms-linear-gradient(top, #fcfcfc 0%, #ececec 100%);
/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(top, #fcfcfc 0%, #ececec 100%);
/* Opera */ 
background-image: -o-linear-gradient(top, #fcfcfc 0%, #ececec 100%);
/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0,     #fcfcfc), color-stop(1, #ececec));
/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(top, #fcfcfc 0%, #ececec 100%);
/* Proposed W3C Markup */ 
background-image: linear-gradient(top, #fcfcfc 0%, #ececec 100%); 
/* IE6-9 */ 
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#fcfcfc',     endColorstr='#ececec'); }

}
#navigation ul li, #navigation ul.sf-menu li { position: relative; list-style:none;     border-right: 1px solid #e3e3e3; background:none; }

#navigation ul li a, #navigation ul.sf-menu li a { padding: 15px 25px; text-decoration:     none; line-height:120%;
display: block; font-weight: bold; text-shadow: 1px 1px 0px #fff; outline:none; }

#navigation ul li a, #navigation ul.sf-menu li a {
width:80px;
max-width:80px; // to make sure that width will be 40px 
}

#nav .wrap {text-align:center; }

#navigation ul li.expanded a, #navigation ul.sf-menu li.menuparent a { padding-right:     35px; }

#navigation ul li a:hover, #navigation ul.sf-menu li a:hover { position: relative;     color: #545454; background-color: #f1f1f1; }

#navigation ul li:hover li a, #navigation ul.sf-menu li li a { color: #595959; font-weight: normal; }

#navigation ul li a.active, #navigation ul.sf-menu li a.active { color: #333333;     background-color: #ffffff; text-shadow: 1px 1px 0px #ffffff; }

#navigation ul ul { position: absolute; top: -999em; width: 230px; }

#navigation ul.sf-menu ul li, #navigation ul ul li { width: 100%; }

#navigation ul.sf-menu li:hover, #navigation ul li:hover { visibility: inherit; }

#navigation ul.sf-menu li, #navigation ul li  { float: left; position: relative; }

#navigation ul.sf-menu a, #navigation ul a { display: block; position: relative; }

#navigation ul.sf-menu li:hover ul,
#navigation ul.sf-menu li.sfHover ul,
#navigation ul li:hover ul { left: 0; top: 46px; z-index: 999; }

#navigation ul.sf-menu li:hover li ul,
#navigation ul.sf-menu li.sfHover li ul,
#navigation  ul li:hover li ul { top: -999em; }

#navigation ul.sf-menu li li:hover ul,
#navigation ul.sf-menu li li.sfHover ul,
#navigation  ul li li:hover ul { left: 230px; top: 0; }

#navigation ul.sf-menu li li:hover li ul,
#navigation ul.sf-menu li li.sfHover li ul,
#navigation ul li li:hover li ul { top: -999em; }

#navigation ul.sf-menu li li li:hover ul,
#navigation ul.sf-menu li li li.sfHover ul,
#navigation  ul li li li:hover ul { left: 230px; top: 0; }

#navigation ul ul { background:none; filter:none; border:none; box-shadow: none;
-moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; }

#navigation ul ul li { border:none; }

#navigation ul ul li a, #navigation ul ul li a.active,
#navigation ul.sf-menu ul li a, #navigation ul.sf-menu ul li a.active {
background-color: #f0f0f0; border:none; padding: 10px; }

#navigation ul ul li a:hover,
#navigation ul.sf-menu ul li a:hover,
#navigation ul.sf-menu ul li.sfHover > a { background-color:#ffffff; }

/*css drop down menu arrows*/
#navigation li.expanded > a, #navigation li.menuparent > a  {
background: transparent url() no-repeat 90% 50%; }

#navigation li li.expanded > a {
background: #f0f0f0 url() no-repeat 90% 50%; }

#navigation li li.expanded:hover > a { background-color:#ffffff; }

#navigation li.expanded:hover > a, #menu li.expanded:active > a,
#navigation li.menuparent:hover > a, #menu li.menuparent:active > a {    
background: #f0f0f0 url() no-repeat 90% 50%; }  
/* 

/* 
* Superfish support: Reset background/border
*/
#navigation .sf-menu a { border:none; }
#navigation .sf-menu li { background-color:none; border-top:none; } 
#navigation .sf-menu li li { border:none; }

Answer 1

在您的 style.css 文件中找到这一行:

#navigation ul.sf-menu li li:hover ul, #navigation ul.sf-menu li li.sfHover ul, #navigation ul li li:hover ul {
    left: 230px;
    top: 0;
}

并缩小左侧位置以匹配其父菜单的宽度(132px 左右)

喜欢

#navigation ul li li:hover ul {
    left: 132px;
    top: 0;
}