メニューの配置についてアドバイスが必要です。私は自分のサイトで Wordpress を使用しており、プレミアム テーマも購入した Vantage テーマを使用しています。
私の問題は次のとおりです。メニュー項目を中央に配置し、等間隔に配置したいのですが、サブメニューを台無しにしないとそれを達成できないようです。
これまでのところ、成功せずに試したことは次のとおりです。 https://stackoverflow.com/a/14103766/3990536 -メニュー/ https://stackoverflow.com/a/16274725/3990536
コードは実際に機能します。私のメニューはきれいに整列しますが、同じクラスを使用しているため、サブメニューにも影響します。それらの新しいクラスを定義する方法、またはサブメニューを実際のメインメニューから分離する方法を理解できないようです。
ここで理解できないのは、サブメニューとメイン メニューの関係です。.main-navigation li を編集すると、サブメニューも同様に影響を受けますが、メイン メニューとサブ メニューに別々の li が必要です。
私のサイトは次のとおりです: http://classwebdesign.hu/testing/
私のメニューのCSSは次のようになります：
/* =Menu
----------------------------------------------- */
.main-navigation{
margin:0 -35px;
background:#343538;
font-size:1em;
position:relative;
text-transform:uppercase;
letter-spacing: 0.08em;
/* Font awesome icons */
/* General menu link styling */
/* For when the menu becomes a sticky menu */
}
.main-navigation [class^="icon-"]{
display:inline-block;
margin-right:15px;
font-size:16px;
line-height:0.5em;
color:#CCCCCC;
}
.main-navigation a:hover [class^="icon-"]{
color:#FFFFFF;
}
.main-navigation ul{
list-style:none;
margin:0;
padding-left:0;
zoom:1;
/* Second level menu items */
}
.main-navigation ul:before{
content:'';
display:block;
}
.main-navigation ul:after{
content:'';
display:table;
clear:both;
}
.main-navigation ul li{
display:block;
position:relative;
float:left;
}
.main-navigation ul li:hover > a{
background:#00bcff;
color:#FFFFFF;
}
.main-navigation ul li a{
padding:20px 35px;
-ms-box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
.main-navigation ul li a,.main-navigation ul li a > *{
-webkit-transition:all 0.4s ease;
-moz-transition:all 0.4s ease;
-o-transition:all 0.4s ease;
transition:all 0.4s ease;
}
.main-navigation ul ul{
-webkit-box-shadow:0 1px 2px rgba(0,0,0,0.15);
-moz-box-shadow:0 1px 2px rgba(0,0,0,0.15);
box-shadow:0 1px 2px rgba(0,0,0,0.15);
background:#464646;
display:none;
position:absolute;
top:100%;
left:0;
z-index:99999;
/* Third Level Items */
}
.main-navigation ul ul a{
width:200px;
padding:15px 20px;
}
.main-navigation ul ul li{
position:relative;
/* Hovering over 2nd level items */
}
.main-navigation ul ul li:hover > a{
background:#00bcff;
color:#FFFFFF;
}
.main-navigation ul ul ul{
left:100%;
top:0;
margin-left:0;
}
.main-navigation ul li:hover > ul{
display:block;
}
.main-navigation a{
display:block;
text-decoration:none;
color:#e2e2e2;
font-weight:bold;
}
.main-navigation.sticky{
-webkit-box-shadow:0 2px 1px rgba(0,0,0,0.15);
-moz-box-shadow:0 2px 1px rgba(0,0,0,0.15);
box-shadow:0 2px 1px rgba(0,0,0,0.15);
}
body.has-menu-search .main-navigation ul{
margin-right:59px;
}
/* Handle the navigation slightly differently on mobile devices */
body.mobile-device .main-navigation ul ul{
display:none;
}
body.mobile-device .main-navigation li:hover > ul{
display:block;
}
.mobile-nav-frame [class^="icon-"]{
display:inline-block;
margin-right:10px;
min-width:1em;
}
.mobile-nav-icon{
font-family:'FontAwesome';
display:inline-block;
margin-right:10px;
}
.mobile-nav-icon:before{
font-size:14px;
content:"\f00b";
}
#search-icon{
position:absolute;
top:0;
right:0;
height:100%;
}
#search-icon #search-icon-icon{
-ms-box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
position:relative;
display:block;
cursor:pointer;
background-color:#303134;
width:59px;
height:100%;
}
#search-icon #search-icon-icon,#search-icon #search-icon-icon .icon-search{
-webkit-transition:all 0.4s ease;
-moz-transition:all 0.4s ease;
-o-transition:all 0.4s ease;
transition:all 0.4s ease;
}
#search-icon #search-icon-icon .icon{
position:absolute;
display:block;
width:17px;
height:17px;
top:50%;
left:50%;
margin-top:-8px;
margin-left:-8.5px;
background: url('images/sprites-1-2.png') no-repeat -102px 0;
}
#search-icon #search-icon-icon:hover{
background-color:#00bcff;
}
#search-icon #search-icon-icon:hover .icon{
background: url('images/sprites-1-2.png') no-repeat 0 0;
}
@media screen and (-webkit-min-device-pixel-ratio: 2) {
#search-icon #search-icon-icon .icon{
background: url(images/retina/search-icon.png) no-repeat;
background-size:17px 17px;
}
#search-icon #search-icon-icon:hover .icon{
background: url(images/retina/search-icon-white.png) no-repeat;
background-size:17px 17px;
}
}
#search-icon .searchform{
display:none;
position:absolute;
top:100%;
right:0;
width:1080px;
background:#2d2e31;
z-index:10;
overflow-x:hidden;
}
#search-icon .searchform input[name=s]{
color:#d1d1d1;
font-size:17px;
font-weight:200;
-ms-box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
display:block;
width:100%;
height:42px;
border:none;
-webkit-border-radius:0px;
-moz-border-radius:0px;
border-radius:0px;
background:transparent;
outline:none;
padding:0 15px;
}
事前にご協力いただきありがとうございます。
編集:以下の回答で、それらを中央に揃えることができましたが、均等に配置されていないため、私にとっても非常に重要です。ありがとう！