"CSSリストメニュー" Webパーツを使用してKentico 9でメニューを作成しました。 CSSを使用してスタイルを設定しましたが、新しいページメニュー項目を追加するまではすべてうまくいきました。今度は、項目がナビゲーション内の1行に収まらなくなりました。ドキュメント名の長さが不均一なので、理想的には長いタイトルのアンパサンドに改行を追加するだけです。 (私はCSSを使用して特定の文字に基づいて改行を挿入する方法を見つけられませんでした)<li>
要素の間で均等に幅を分割すると、最初のタイトルが3行にプッシュされ、メニュー項目魅力的ではありません。気をつけておくべきことは、各親ページの最初のレベルの子ページをその下に表示するホバー機能です。KentcoのCSSリストメニューで使用されるページ名に改行を挿入する9
現在のメニューの外観は:
私がチェックされているWebパーツと、「ワードラップ」への重要な変更を加えていません。ここでCSSのコードは次のとおりです。
/* Horizontal menu - main menu */
header nav {
text-align: center;
width: 100%; /* Container width is 960px */
background-color: rgb(1, 69, 106);
box-sizing: border-box;
}
header nav ul {
list-style: none;
margin: 0;
padding: 0;
left: 0;
}
header nav ul li {
display: inline-block;
position: relative;
padding:0;
font-size: 1.15em;
}
header nav ul li a {
text-decoration: none;
border: 10px solid rgb(1, 69, 106);
display: block;
}
header nav ul li a:visited {
color: rgb(234, 161, 23);
}
header nav ul li a:hover,
header nav ul li a:active,
header nav ul li a:focus {
text-decoration: none;
color: rgb(255, 255, 255);
background-color: rgb(8, 96, 143);
border: 10px solid rgb(8, 96, 143);
}
header nav ul ul {
display: none;
}
header nav ul li:hover ul {
display: block;
background-color: rgb(1, 69, 106);
position: absolute;
width: 100%;
}
header nav ul li ul li {
font-size: 1em;
width: 100%;
z-index: 1;
background-color: rgb(1, 69, 106);
}
header nav ul li ul li a {
border: 5px solid rgb(1, 69, 106);
display: block;
}
header nav ul li ul li a:hover,
header nav ul li ul li a:active,
header nav ul li ul li a:focus {
border: 5px solid rgb(8, 96, 143);
}
header nav ul ul ul li {
display: none;
}