0
純粋なCSSナビゲーションに問題があります。私はトップレベルのアイテムを浮かべて、今ではすべてのサブアイテムがメインナビゲーション内に隠されています。私はクリア、ポジショニング、Z-インデックスを試してみましたが、何も動作しません。CSS水平ナビゲーションサブメニューが隠されています
私が達成した最高のものは、ホバリングで拡大している私のトップレベルメニューです。何かアドバイス？
これは答えがどこかにあると確信していますが、私はYouTube、ブログ、スタックを検索して答えを得ていて、必要なものを見つけることができませんでした。
html {
\t height: 100%:
}
body {
\t height: 100%;
} \t
\t
#menu-novo-container {
border-collapse: collapse;
font-family: tahoma, Arial, helvetica, Serif;
background-color: #336699;
min-height: 38px;
position: relative;
}
#menu-novo {
padding: 0;
height: inherit;
}
#menu-novo * {
margin: 0;
padding: 0;
}
#menu-novo .menu-novo-item {
cursor: pointer;
list-style: none;
font-size: 16px;
color: #FFF;
font-weight: normal;
padding: 4px 7px 4px 7px;
border-right: 1px solid white;
word-wrap: break-word;
min-height: 38px;
width: auto;
}
#menu-novo .root-item {
text-align: center;
float: left;
height: inherit;
position: relative;
}
.level-1-item,
.level-2-item,
.level-3-item {
font-size: 14px;
border-left: solid 1px #DEE8F5;
border-right: solid 1px #DEE8F5;
border-bottom: solid 1px #DEE8F5;
height: 30px;
float: none;
}
.level-1-submenu, .level-2-submenu, .level-3-submenu {
\t display: none;
position: relative;
top: 100%;
left: 0;
z-index: 598;
width: 100%;
}
.level-1-submenu {
bottom: 0;
left: 0;
}
.level-2-submenu {
top: 0; /*shouldn't this be positioned relative to parent*/
left: auto;
right: -99.5%;
}
#menu-novo .root-item:hover > .level-1-submenu {
display: block;
}
#menu-novo .level-1-item:hover > .level-2-submenu {
display: block;
}
#menu-novo .level-2-item:hover > .level-3-submenu {
display: block;
}
.menu-novo-link,
.menu-novo-link:visited,
.menu-novo-link:active {
text-decoration: none;
color: #FFF;
}
.novo-clear {
width: 0;
height: 0;
clear: both;
}<div id="menu-novo-container">
<ul id="menu-novo">
<li class="menu-novo-item root-item"> 1
<ul class="menu-novo-submenu level-1-submenu">
<li class="menu-novo-item level-1-item"><a href="#" class="menu-novo-link">1.1</a></li>
<li class="menu-novo-item level-1-item"><a href="#" class="menu-novo-link">1.2</a></li>
<li class="menu-novo-item level-1-item"><a href="#" class="menu-novo-link">1.3</a></li>
<li class="menu-novo-item level-1-item">1.4.
<ul class="menu-novo-sumbenu level-2-submenu">
<li class="menu-novo-item level-2-item"><a href="#" class="menu-novo-link">1.4.1</a></li>
<li class="menu-novo-item level-2-item"><a href="#" class="menu-novo-link">1.4.2</a></li>
<li class="menu-novo-item level-2-item"><a href="#" class="menu-novo-link">1.4.3</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>[SOLUTION] それはすべてに沿って私の愚かな間違いでした。私は背景を定義しなかったし、それは見えなかったが、そこに...それは排水の3日間の仕事です。
ややそれを解決なかったこと、あなたの答えをありがとう、私が作った御岳は背景を定義していませんでした。私はまっすぐ3日間それを見つけることができませんでした:) – dzenesiz