如何解决如何阻止菜单在不同缩放级别上分成单独的行?
这可能真的很复杂,但我敢打赌这是一个简单的解决方案。我正在 Wordpress 上起草一个网站,当在 Chrome 中以 90% 的缩放级别查看页面时,菜单会损坏(在所有其他缩放级别上显示正常)。所有其他缩放级别都可以正常显示菜单,并且在移动设备上显示不同的菜单。
有人可以帮忙吗?
这是导航代码:
# Navigation
--------------------------------------------------------------*/
/* Small menu. */
.menu-toggle {
display: block;
float: right;
margin-right: 5px;
margin-bottom: 1.65em;
}
.menu-toggle.toggled-on {
background: #235380;
border-color: #235380;
color: #FFF;
}
.main-navigation {
clear: both;
display: block;
position: absolute;
top: 1.65em;
right: 10px;
width: auto;
z-index: 3;
}
.main-navigation ul {
list-style: none;
margin: 0;
padding-left: 0;
}
.main-navigation > div {
display: none;
}
.main-navigation > div.toggled-on {
display: block;
}
.main-navigation > div > ul {
list-style: none;
margin: 0;
padding-left: 0;
background: #FFF;
border: 1px solid #235380;
-webkit-border-top-left-radius: 0.5em;
-moz-border-top-left-radius: 0.5em;
border-top-left-radius: 0.5em;
-webkit-border-top-right-radius: 0.5em;
-moz-border-top-right-radius: 0.5em;
border-top-right-radius: 0.5em;
overflow: hidden;
overflow: inherit;
}
.main-navigation > div > ul li {
position: relative;
position: relative;
}
.main-navigation > div > ul li:before {
content: "";
position: absolute;
border-bottom: 1px solid #235380;
bottom: 0;
height: 0;
left: 0;
width: 100%;
}
.main-navigation > div > ul li:hover span,.main-navigation > div > ul li.focus span {
color: #ffffff;
}
.main-navigation > div > ul li:hover > ul,.main-navigation > div > ul li.focus > ul {
left: auto;
}
.main-navigation .sub-menu,.main-navigation .children {
position: relative;
display: none;
}
.main-navigation .sub-menu:before,.main-navigation .children:before {
content: "";
position: absolute;
border-top: 1px solid #235380;
height: 0;
top: 0;
left: 0;
width: 100%;
}
.main-navigation .sub-menu a:before,.main-navigation .children a:before {
content: "\26AC\00a0\00a0";
color: #ffffff;
display: inline-block;
font-weight: 100;
}
.main-navigation .sub-menu:before,.main-navigation .children:before {
top: -1px;
}
.main-navigation .sub-menu.toggled-on,.main-navigation .children.toggled-on {
display: block;
}
.main-navigation .sub-menu ul,.main-navigation .children ul {
position: relative;
}
.main-navigation .sub-menu ul:before,.main-navigation .children ul:before {
content: "";
position: absolute;
border-top: 1px solid #cfccc7;
height: 0;
top: 0;
left: 0;
width: 100%;
}
.main-navigation .sub-menu ul:before,.main-navigation .children ul:before {
top: -1px;
}
.main-navigation .sub-menu li,.main-navigation .children li {
position: relative;
position: relative;
}
.main-navigation .sub-menu li:before,.main-navigation .children li:before {
content: "";
position: absolute;
border-bottom: 1px solid #cfccc7;
bottom: 0;
height: 0;
left: 0;
width: 100%;
}
.main-navigation .sub-menu li.menu-item-has-children ul a,.main-navigation .sub-menu li.page_item_has_children ul a,.main-navigation .children li.menu-item-has-children ul a,.main-navigation .children li.page_item_has_children ul a {
padding-left: 40.5px;
}
.main-navigation a {
display: block;
font-weight: 600;
line-height: 1.1875em;
padding: 20.25px;
word-break: break-word;
}
.main-navigation a span {
display: none;
}
.main-navigation .menu-item-has-children > a,.main-navigation .page_item_has_children > a {
padding: 20.25px 55px 20.25px 20.25px;
}
.main-navigation .dropdown-toggle {
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
background: transparent;
border: 2px solid #235380;
color: #235380;
display: inline-block;
fill: currentColor;
height: 32px;
position: absolute;
right: 12px;
text-align: center;
top: 12px;
width: 32px;
z-index: 2;
}
.main-navigation .dropdown-toggle:focus {
background: #fff;
border-color: #235380;
}
.main-navigation .dropdown-toggle svg {
height: 20px;
position: absolute;
left: 4px;
top: 4px;
width: 20px;
}
.main-navigation .dropdown-toggle:focus svg {
fill: #000;
}
.main-navigation .dropdown-toggle.toggled-on {
color: #235380;
background-color: #fff;
border-color: #235380;
-ms-transform: rotate(45deg);
/* IE 9 */
-webkit-transform: rotate(45deg);
/* Chrome,Safari,Opera */
transform: rotate(45deg);
}
.main-navigation .dropdown-toggle.toggled-on:focus svg {
fill: currentColor;
}
.main-navigation.toggled-on {
width: calc(100% - 20px);
}
.main-navigation.toggled-on > div > ul {
display: flex;
flex-direction: column;
width: 100%;
}
@media screen and (min-width: 50em) {
.menu-toggle {
display: none;
}
.main-navigation {
min-height: 55px;
margin-bottom: 3.3em;
position: relative;
top: inherit;
right: inherit;
width: 100%;
z-index: 5;
}
.main-navigation > div {
display: block;
position: relative;
z-index: 2;
}
.main-navigation > div.hide {
z-index: 1;
}
.main-navigation > div.hide ul {
max-height: 0;
opacity: 0;
overflow: hidden;
z-index: 0;
}
.main-navigation a {
height: 100%;
position: relative;
z-index: 3;
}
.main-navigation a:hover {
color: #FFF;
}
.main-navigation a:hover span {
color: #ffffff;
}
.main-navigation a span {
color: #434343;
display: block;
font-size: 12px;
font-size: 0.75rem;
font-weight: 300;
line-height: 1.65;
margin-top: 3px;
}
.main-navigation .menu-item-has-children a,.main-navigation .page_item_has_children a {
padding: 20px 35px 26px 20px;
}
.main-navigation .menu-item-has-children > ul li a,.main-navigation .page_item_has_children > ul li a {
padding-bottom: 20px;
}
.main-navigation > div > ul,.main-navigation.toggled-on > div > ul {
background: #FFF;
border: 1px solid #235380;
-webkit-border-radius: 0.5em;
-moz-border-radius: 0.5em;
border-radius: 0.5em;
overflow: hidden;
align-content: stretch;
align-items: stretch;
display: flex;
flex-direction: row;
flex-wrap: wrap;
max-height: 9999px;
opacity: 1;
overflow: visible;
-webkit-transition: all 0.125s ease-out;
-moz-transition: all 0.125s ease-out;
-o-transition: all 0.125s ease-out;
transition: all 0.125s ease-out;
}
.main-navigation > div > ul > li,.main-navigation.toggled-on > div > ul > li {
margin: -1px -1px 0;
width: calc(25% + 2px);
}
.main-navigation > div > ul > li:before,.main-navigation.toggled-on > div > ul > li:before {
position: relative;
}
.main-navigation > div > ul > li:before:before,.main-navigation.toggled-on > div > ul > li:before:before {
content: "";
position: absolute;
border: none
}
.main-navigation > div > ul > li:hover,.main-navigation > div > ul > li.focus,.main-navigation.toggled-on > div > ul > li:hover,.main-navigation.toggled-on > div > ul > li.focus {
background: #fff;
}
.main-navigation > div > ul > li:hover a,.main-navigation > div > ul > li.focus a,.main-navigation.toggled-on > div > ul > li:hover a,.main-navigation.toggled-on > div > ul > li.focus a {
color: #235380;
}
.main-navigation > div > ul > li:hover a:hover,.main-navigation > div > ul > li.focus a:hover,.main-navigation > div > ul > li.focus a:focus,.main-navigation.toggled-on > div > ul > li:hover a:hover,.main-navigation.toggled-on > div > ul > li.focus a:hover,.main-navigation.toggled-on > div > ul > li.focus a:focus {
color: #0000FF;
}
.main-navigation > div ul li:hover > button,.main-navigation > div ul li.focus > button,.main-navigation > div ul li:hover > button,.main-navigation > div ul li.focus > button {
border-color: #235380;
}
.main-navigation > div ul li:hover > button svg,.main-navigation > div ul li.focus > button svg,.main-navigation > div ul li:hover > button svg,.main-navigation > div ul li.focus > button svg {
fill: #235380;
}
.main-navigation > div > ul > li:hover .sub-menu,.main-navigation > div > ul > li:hover .children,.main-navigation > div > ul > li.focus .sub-menu,.main-navigation > div > ul > li.focus .children,.main-navigation.toggled-on > div > ul > li:hover .sub-menu,.main-navigation.toggled-on > div > ul > li:hover .children,.main-navigation.toggled-on > div > ul > li.focus .sub-menu,.main-navigation.toggled-on > div > ul > li.focus .children {
display: block;
}
.main-navigation .sub-menu,.main-navigation .children {
background: #fff;
box-shadow: 2px 3px 3px rgba(0,0.33);
display: inherit;
float: left;
position: absolute;
top: calc(100% - 10px);
left: -999em;
width: 300px;
z-index: 99999;
border: 1px solid #235380;
}
.main-navigation .sub-menu ul,.main-navigation .children ul {
position: absolute;
left: -999em;
top: 0;
}
.main-navigation .sub-menu ul:before,.main-navigation .children ul:before {
border-color: #235380;
}
.main-navigation .sub-menu a:before,.main-navigation .children a:before {
content: "";
display: none;
}
.main-navigation .sub-menu li a,.main-navigation .children li a {
color: #FFF;
}
.main-navigation .sub-menu li:before,.main-navigation .children li:before {
border-color: #235380;
}
.main-navigation .sub-menu li:hover > ul,.main-navigation .sub-menu li.focus > ul,.main-navigation .children li:hover > ul,.main-navigation .children li.focus > ul {
left: 100%;
}
.main-navigation .sub-menu li:hover > a,.main-navigation .sub-menu li.focus > a,.main-navigation .sub-menu li.menu-item-has-children li a:hover,.main-navigation .sub-menu li.page_item_has_children li a:hover,.main-navigation .children li:hover > a,.main-navigation .children li.focus > a,.main-navigation .children li.menu-item-has-children li a:hover,.main-navigation .children li.page_item_has_children li a:hover {
color: #ffffff;
}
.main-navigation .sub-menu li.menu-item-has-children:hover ul li,.main-navigation .sub-menu li.page_item_has_children:hover ul li,.main-navigation .children li.menu-item-has-children:hover ul li,.main-navigation .children li.page_item_has_children:hover ul li {
background: #2A2A2A;
}
.main-navigation .sub-menu li.menu-item-has-children ul a,.main-navigation .children li.page_item_has_children ul a {
padding-left: 20.25px;
}
.main-navigation .sub-menu li.menu-item-has-children:hover ul a:active,.main-navigation .sub-menu li.menu-item-has-children:hover ul a:hover,.main-navigation .sub-menu li.page_item_has_children:hover ul a:active,.main-navigation .sub-menu li.page_item_has_children:hover ul a:hover,.main-navigation .children li.menu-item-has-children:hover ul a:active,.main-navigation .children li.menu-item-has-children:hover ul a:hover,.main-navigation .children li.page_item_has_children:hover ul a:active,.main-navigation .children li.page_item_has_children:hover ul a:hover {
color: #235380;
}
.main-navigation.add-seperators > div > ul > li {
position: relative;
}
.main-navigation.add-seperators > div > ul > li:before {
content: "";
position: absolute;
border-bottom: 1px solid #235380;
bottom: 0;
height: 0;
left: 1px solid #235380;
width: 100%;
}
.main-navigation.add-seperators > div > ul > li:before {
bottom: 0;
}
.main-navigation.add-seperators > div > ul > li:nth-child(4n):nth-last-child(-n+5) ~ li:before,.main-navigation.add-seperators > div > ul > li:last-child:nth-child(-n+3):before {
display: none;
}
.main-navigation.add-seperators > div > ul > li:nth-child(4n):nth-last-child(-n+5) ~ li:hover:before,.main-navigation.add-seperators > div > ul > li:last-child:nth-child(-n+3):hover:before {
border-color: #222;
bottom: -1px;
display: block;
}
.main-navigation .dropdown-toggle {
height: 20px;
padding: 0;
right: 18px;
top: 18px;
width: 20px;
z-index: 2;
}
.main-navigation .dropdown-toggle svg {
height: 16px;
left: 0;
position: absolute;
top: 0;
width: 16px;
}
.main-navigation .dropdown-toggle.toggled-on {
background-color: transparent;
border-color: #235380;
color: #235380;
-ms-transform: rotate(0deg);
/* IE 9 */
-webkit-transform: rotate(0deg);
/* Chrome,Opera */
transform: rotate(0deg);
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。