ナビゲーションメニューがずれてしまいます
-
テーマ:twentytwelveを使用しています。
ナビゲーションバーの余白部分を、右指定ではなく、左指定にしたいと考えています。
ところが、以下のように左指定にすると、プルダウンメニューが余白分右にずれてしまいます。.main-navigation li {
/*margin: 0 40px 0 0;*/ /*右指定*/
/*margin: 0 2.857142857rem 0 0;*/
margin: 0 0 0 40px; /*左指定*/
margin: 0 0 0 2.857142857rem;
position: relative;
}回避方法が分からない状態です。
どなたか、ヒントだけでも、お願いいたします。———————————————–
.main-navigation ul.nav-menu,
.main-navigation div.nav-menu > ul {
/*border-bottom: 1px solid #ededed;*/
/*border-top: 1px solid #ededed;*/
display: inline-block !important;
text-align: left;
/*width: 100%;*/
width: 100%;
}
.main-navigation ul {
margin: 0;
text-indent: 0;
font-size: 0;
/*padding-left: 10px;*/
/*padding-left: 0.714285714rem*/;
}
.main-navigation li a,
.main-navigation li {
display: inline-block;
text-decoration: none;
color: #000;
width : 123px;
text-align: center;}
.main-navigation li a {
border-bottom: 0;
/*color: #6a6a6a;*/
color: #fff;
background-color:#00A1E0;
line-height: 3.692307692;
text-transform: uppercase;
white-space: nowrap;
}
.main-navigation li a:hover {
color: #000;
background-color: #fff;
}
.main-navigation li {
/*margin: 0 40px 0 0;*/ /*右指定*/
/*margin: 0 2.857142857rem 0 0;*/
margin: 0 0 0 40px; /*左指定*/
margin: 0 0 0 2.857142857rem;
position: relative;
}
.main-navigation li ul {
display: none;
margin: 0;
padding: 0;
position: absolute;
top: 100%;
z-index: 1;
}
.main-navigation li ul ul {
top: 0;
left: 100%;
}
.main-navigation ul li:hover > ul {
border-left: 0;
display: block;
}
.main-navigation li ul li a {
/*background: #efefef;*/
background: #fff;
color: #444;
/*border-bottom: 1px solid #ededed;*/
border-bottom: 1px solid #ededed;
/*border-left: 1px solid #444;*/
/*border-right: 1px solid #444;*/
display: block;
font-size: 11px;
font-size: 0.785714286rem;
line-height: 2.181818182;
/*padding: 8px 10px;*/
/*padding: 0.571428571rem 0.714285714rem;*/
/*width: 180px;*/
width: 123px;
white-space: normal;
}
.main-navigation li ul li a:hover {
background: #e3e3e3;
color: #444;
}
.main-navigation .current-menu-item > a,
.main-navigation .current-menu-ancestor > a,
.main-navigation .current_page_item > a,
.main-navigation .current_page_ancestor > a {
color: #636363;
font-weight: bold;
}
- トピック「ナビゲーションメニューがずれてしまいます」には新たに返信することはできません。