ナビゲーションメニューがあります。デザインは下の画像のとおりです。今サブメニューは、外にぶら下がったときに隠されます
、I hoverAbout Us上のサブメニューが開いて取得します。
しかし、サブメニュー項目にカーソルを移動しようとすると、hoverがliから削除されています。その理由は、sub-menu gets closedです。
カーソルがサブメニュー項目に達するまで、メニューを開いたままにします。
注：メニューとサブメニューの間のスペースは、そのまま維持する必要があります（上記の画像に赤い枠で示されています）。あなたは、コードへのリンクを見つけることができます
、 here任意の助けいただければ幸いです！
迅速な解決策：
ul#nav li:hover > ul {margin: 40px 0 0 0; border-top: 10px solid #b58d69; }
乾杯！
あなたは少し高くしなければならないので、サブメニューとこの特定のliとの間の空き領域をカバーします。この場合、最も簡単な解決策は、li内のメインのタグにマージンを追加することでした。この効果を実現する方法（li内のパディングを追加し、タグに背景色を適用する方法）がありますが、これが最速の方法です。 「追加」と私はあなたが求めていると、これはあなたのアイデアを与えるかもしれないもののようなものを行っている
#menu {
width: 960px;
height: 40px;
clear: both;
}
ul#nav {
float: left;
width: 960px;
margin: 0;
padding: 0;
list-style: none;
background: #b58d69 url(../img/menu-parent.png) repeat-x;
-moz-border-radius-topright: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;
}
ul#nav li {
display: inline-block; /*changed*/
padding-bottom: 10px; /*added*/
position: relative; /*added*/
}
ul#nav li a {
float: left;
font: bold 1.1em arial, verdana, tahoma, sans-serif;
line-height: 40px;
color: #fff;
text-decoration: none;
margin: 0;
padding: 0px 20px;
background: #b58d69 url(../img/menu-parent.png) repeat-x;
-moz-border-radius-topright: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;
}
ul#nav li a.plus_a { /*added*/
position: absolute;
}
ul#nav .current a, ul#nav li:hover > a {
color: #b58d69;
text-decoration: none;
background: #30251b;
-moz-border-radius-topright: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;
}
ul#nav ul {
display: none;
}
ul#nav li:hover > ul {
position: absolute;
width: 920px;
height: 45px;
position: absolute;
margin: 50px 0 0 0;
background: #fff;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-bottom-left-radius: 10px;
}
ul#nav li:hover > ul li a {
float: left;
font: bold 1.1em arial, verdana, tahoma, sans-serif;
line-height: 45px;
color: #b58d69;
text-decoration: none;
margin: 0;
padding: 0 20px 0 0;
background: #fff;
}
ul#nav li:hover > ul li a:hover {
color: #30251b;
text-decoration: none;
text-shadow: none;
}
ul#nav li:hover > ul {
display:block !important;
}
ありがとうございます。私はあなたのコードを試しました。しかし、サブメニューの位置が変更されました。メニュータイトルのすぐ下に表示されますが、そうではありません。私の質問では、上記の画像でサブメニューの元の位置を見つけることができます。あなたのコードでCSSを更新しました。ここで確認できます - https://jsfiddle.net/hodtfkys/7/ – Chaitali
a.plus_aの位置を絶対に変更する必要はありませんが、問題を整理する必要がありますこの要素はliに余分な幅を与えます。これは高さを維持するためにインラインの代わりにインラインブロックを表示する必要があります。 –
下のCSSのノートを「変更」。のための
検索チュートリアルでそれを見たyoutube fro CSSだけドロップダウンします。あなたはこの問題の背後にある考え方を使って問題を解決することができます。しかし、これはユーザーがリンクをクリックしたときに機能します。
.fixed-nav-container {
height: 90px;
width: 100%;
background-color: #111;
position: fixed;
z-index: 16;
}
.fixed-nav-container:hover {
opacity: 1;
}
.fixed-nav .active {
padding: 23px 0px;
background-color: #2a2730;
box-shadow: inset 0 3px 7px black;
}
.fixed-nav {
width: 100%;
height: 70px;
font-family: Arial, Helvetica, sans-serif;
}
.fixed-nav ul {
display: block;
text-align: center;
}
.fixed-nav ul li {
display: inline-block;
padding: 20px 15px;
font-weight: bold;
width: 15%;
border-right: 2px solid #2a2730;
}
.fixed-nav ul li:last-child {
border-right: 0px;
}
.fixed-nav ul li a {
text-decoration: none;
color: silver;
transition: all linear 0.5s;
-webkit-transition: all linear 0.5s;
padding: 10px 0px;
}
.fixed-nav ul li a:hover {
font-size: medium;
transition: all linear 0.2s;
-webkit-transition: all linear 0.2s;
}
.fixed-nav-content {
position: absolute;
top: 70px;
overflow: hidden;
background-color: #111111;
color: #FFFFFF;
max-height: 0px;
}
.fixed-nav-content a {
text-decoration: none;
color: #FFFFFF;
}
.fixed-nav-content a:hover {
background-color: silver;
box-shadow: inset 0 3px 7px black;
color: #2a2730;
}
.fixed-nav-content:active {
max-height: 400px;
}
.fixed-nav-sub ul {
padding: 0px;
list-style-type: none;
text-align: left;
}
.fixed-nav-sub ul li {
width: 20%;
}
.fixed-nav-sub ul li a {
padding: 10px;
display: inline-block !important;
background-color: #2a2730;
box-shadow: inset 0 3px 7px black;
}
.nav-item:focus {
background-color: #2a2730;
padding: 10px;
box-shadow: inset 0 3px 7px black;
}
.nav-item:hover ~ .fixed-nav-content {
max-height: 400px;
transition: max-height 0.4s linear;
}<div class="fixed-nav-container">
<nav class="fixed-nav">
<ul>
<li>
<a href="#" class="nav-item">About</a>
<div class="fixed-nav-content">
<div class="fixed-nav-sub">
<ul>
<li><a href="about.php">About Us</a></li>
<li><a href="team.php">Meet The team</a></li>
<li><a href="recent.php">Recent Projects</a></li>
</ul>
</div>
</div>
</li>
<li>
<a href="#" class="nav-item">Services</a>
<div class="fixed-nav-content">
<div class="fixed-nav-sub">
<ul>
<li><a href="civilworks.php">Civil Works</a></li>
<li><a href="electrical.php">Electrical</a></li>
<li><a href="watereng.php">Water Engineering</a></li>
<li><a href="telecoms.php">Telecoms</a></li>
<li><a href="it.php">Info. Technology</a></li>
<li><a href="renewable.php">Renewable Energy</a></li>
<li><a href="consulting.php">Consulting</a></li>
</ul>
</div>
</div>
</li>
</ul>
</nav>
</div>
おかげで..あなたは私の一日を救いました！ – Chaitali