css - 调整导航菜单以适应额外的按钮

Question

我需要帮助向我的网站主导航栏添加一个额外的导航按钮。如果有帮助，这是一个 Woo Wordpress 主题。尝试更改 css 中的填充无济于事。当我添加名为“合作伙伴”的新导航按钮时，最后一个菜单项下降到第二行，这看起来不是最好的。

这是我的网址:http://kumbayah.com.au/

这是我的导航 CSS:

/* 2.2 Navigation */
#navigation{font:14px/14px sans-serif;border-top:10px solid #dbdbdb; border-bottom:5px solid #dbdbdb;padding:15px 0; margin-bottom:30px;}

#navigation ul.rss{background:url(images/ico-rss.png) no-repeat right 5px;padding:1px 6px 3px 0;margin-right:10px;}
#navigation ul.rss li{display:inline;padding:0 10px 0 0;}
#navigation ul.rss li a{color:#c63f00;text-decoration:none;}
#navigation ul.rss li a:hover{text-decoration:underline;}

.nav { z-index:99; margin:0; padding:0; list-style:none; line-height:1; margin-left:10px; }
.nav a  { position:relative; color:#555; display:block; z-index:100; padding:5px 10px; line-height:18px; text-decoration:none; }
.nav li a:hover, .nav li.current_page_item a, .nav li.current_page_parent a, .nav li.current-menu-ancestor a, .nav li.current-menu-item a, .nav li.current_page_item li a, .nav li.current_page_parent li a, .nav li.current-menu-ancestor li a, .nav li.current-menu-item li a, .nav li.sfHover a { background:#eee; }
.nav li li.current_page_item { background:none; }
.nav li  { float:left; width: auto; }
.nav li a.sf-with-ul { padding-right:20px; }
.nav li ul li a  { text-shadow:0 1px 0 #fff; }
.nav li ul li a { border-radius:0;-moz-border-radius:0;-webkit-border-radius:0;}
.nav a, .nav li.current_page_item, .nav li.current_page_parent, .nav li.current-menu-ancestor, .nav li.current-menu-item, .nav li.sfHover, .nav li.selected { border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;}

/* 2.2.1 Drop-down menus */
.nav li ul  { background: #FFF; position: absolute; left: -999em; width: 180px; border: 1px solid #dbdbdb; border-width:1px 1px 0; z-index:999; }
.nav li ul li  { background:#eee; border-top:1px solid #fff; border-bottom:1px solid #dbdbdb;}
.nav li ul li a  { width:160px; color:#555; font-size:0.8em; line-height:18px; }
.nav li ul li a.sf-with-ul { padding:5px 10px; }
.nav li ul li a:hover, .nav li.sfHover ul li a.sf-with-ul { background:#eaeaea;}
.nav li ul ul  { margin: -30px 0 0 180px; }
.nav li ul ul li a  {  }
.nav li ul li ul li a  {  }

.nav li:hover,.nav li.hover  { position:static; }
.nav li:hover ul ul, .nav li.sfhover ul ul,
.nav li:hover ul ul ul, .nav li.sfhover ul ul ul,
.nav li:hover ul ul ul ul, .nav li.sfhover ul ul ul ul { left:-999em; }
.nav li:hover ul, .nav li.sfhover ul,
.nav li li:hover ul, .nav li li.sfhover ul,
.nav li li li:hover ul, .nav li li li.sfhover ul,
.nav li li li li:hover ul, .nav li li li li.sfhover ul  { left:auto; }

.nav .sf-sub-indicator {background: url(images/arrow-superfish.png) no-repeat;position:absolute;display:block;right:0.4em;top:40%;width:10px;height:10px;text-indent:-999em;overflow:hidden;}
.nav li ul .sf-sub-indicator {background:url(images/arrow-superfish-right.png) no-repeat;}

/* 2.2.2 Top Navigation (optional) */
#top { background: #000; }
#top .nav { margin:0; }
#top .nav a { color:#ddd; padding:8px 10px; line-height:18px; text-decoration:none; text-shadow:none; }
#top .nav li  {  }
#top .nav li a.sf-with-ul { padding-right:20px; }
#top .nav .sf-sub-indicator { top:40%; }

#top .nav a:hover, 
#top .nav li.current_page_item a, 
#top .nav li.current_page_parent a,
#top .nav li.current-menu-ancestor a,
#top .nav li.current-cat a,
#top .nav li.current-menu-item a,
#top .nav li.sfHover a { background: #222; border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;}

#top .nav li ul  { background: #222; margin:0; padding:0px; width: 180px; border: none; z-index:999;
    /* Box Shadow */
    -moz-box-shadow: 0 2px 2px rgba(0,0,0,.1);
    -webkit-box-shadow: 0 2px 2px rgba(0,0,0,.1);
    box-shadow: 0 2px 2px rgba(0,0,0,.1);
}
#top .nav li ul, #top .nav li ul li:last-child a {
    /* Border Radius */
    border-radius: 0 0 4px 4px; -moz-border-radius: 0 0 4px 4px; -webkit-border-radius: 0 0 4px 4px; 
}
#top .nav li ul li { background:none; border:none; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); }
#top .nav li ul li a  { padding:8px 10px; width:160px; color:#ddd; background: none; font-size:0.9em;}
#top .nav li ul li a:hover  { background: #000; }
#top .nav li ul li a.sf-with-ul { padding-right:10px; }
#top .nav li ul ul  { margin: -34px 0 0 180px; }

#top .nav li:hover, #top .nav li.hover  { position:static; }
#top .nav li:hover ul ul, #top .nav li.sfhover ul ul,
#top .nav li:hover ul ul ul, #top .nav li.sfhover ul ul ul,
#top .nav li:hover ul ul ul ul, #top .nav li.sfhover ul ul ul ul { left:-999em; }
#top .nav li:hover ul, #top .nav li.sfhover ul,
#top .nav li li:hover ul, #top .nav li li.sfhover ul,
#top .nav li li li:hover ul, #top .nav li li li.sfhover ul,
#top .nav li li li li:hover ul, #top .nav li li li li.sfhover ul  { left:auto; }

任何和所有的帮助都会很棒。

谢谢

Answer 1

你的问题出在这一行:

.nav li  { float:left; width: auto; }

自动宽度通常效果很好，但在狭窄区域可能会出现问题，正如您所注意到的。简单的解决方案是设置宽度以根据其实际宽度容纳每个 li 项，或者简单地将宽度设置为 11%，如下所示:

.nav li  { float:left; width: 11%; } 

我已经在您的网站上测试了 11%，它运行良好并且看起来不错。我建议对其进行优化，以便每个元素根据其实际宽度具有自己的宽度。

祝你好运!