2016-12-30 6 views
1

私は最近、自分のnavbarドロップダウンでエラーが発生したときに私の友人とウェブサイトをコーディングしていました。サイトの関連するHTML/CSSは次のとおりです。どうすればドロップダウンを修正できますか?ドロップダウンが早すぎるHTML CSS

body { 
 
    background-image: url("http://equinoxhosting.net/cdn.wallpapersafari.com/14/86/kujVXw.jpg"); 
 
    background-size: cover; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
/* ~~ Top Navigation Bar ~~ */ 
 

 
#navigation-container { 
 
    width: 1200px; 
 
    margin: 0 auto; 
 
    height: 84px; 
 
} 
 

 
.navigation-bar { 
 
    
 
    background-color: rgba(0, 0, 0, 0.25); 
 
    width: 100%;  
 
} 
 

 
.navigation-bar ul { 
 
    padding: 0px; 
 
    margin: 0px; 
 
    text-align: center; 
 
} 
 

 
.navigation-bar li { 
 
    list-style-type: none; 
 
    padding: 0px; 
 
    height: 24px; 
 
    margin-top: 4px; 
 
    margin-bottom: 4px; 
 
    display: inline; 
 
} 
 

 
.navigation-bar li a { 
 
    position: relative; 
 
    color: white; 
 
    font-size: 16px; 
 
    font-family: sans-serif; 
 
    text-decoration: none; 
 
    line-height: 70px; 
 
    padding: 5px 35px; 
 

 
} 
 

 
#menu { 
 
    float: right; 
 
} 
 
.navbrand { 
 
    font-family: sans-serif; 
 
    color: white; 
 
    position: absolute; 
 
    top: 15px; 
 
    left: 90px; 
 
} 
 
li a, .dropbtn { 
 
    display: inline-block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
} 
 

 
li a:hover, .dropdown:hover .dropbtn { 
 
    background-color: gray; 
 
} 
 

 
li.dropdown { 
 
    display: inline-block; 
 
} 
 

 
.dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    background-color: rgba(0, 0, 0, 0.25); 
 
    min-width: 160px; 
 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
 
} 
 

 
.dropdown-content a { 
 
    color: black; 
 
    padding: 12px 16px; 
 
    text-decoration: none; 
 
    display: block; 
 
    text-align: left; 
 
} 
 

 
.dropdown-content a:hover {background-color: gray} 
 

 
.dropdown:hover .dropdown-content { 
 
    display: block; 
 
} 
 
div.inner { 
 
    position: relative; 
 
background-color: white; 
 
padding: 250px; 
 
    top: 150px; 
 
} 
 

 
h2 { 
 
    position: relative; 
 
    bottom: 255px; 
 
    font-family: sans-serif; 
 
} 
 
p3 { 
 
    font-family: sans-serif; 
 
    position: relative; 
 
    bottom: 260px; 
 
} 
 

 
h3 { 
 
    position: relative; 
 
    font-family: sans-serif; 
 
    top: 60px; 
 
    cursor: default; 
 
} 
 
p4 { 
 
    position: relative; 
 
    font-family: sans-serif; 
 
    top: 35px; 
 
} 
 

 
.button { 
 
    position: relative; 
 
    background-color: #1DB2E3; 
 
    border: 2px; 
 
    border-radius: 25px; 
 
    color: white; 
 
    padding: 15px 32px; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    display: inline-block; 
 
    font-size: 16px; 
 
    margin: 4px 2px; 
 
    cursor: pointer; 
 
    top: 70px; 
 
}
<div class="navbrand"> 
 
    <p><font size="5">Equinox Hosting</font></p> 
 
</div> 
 
<div id="menuwrapper"> 
 
<div class="navigation-bar"> 
 
    <div class="navbar-inner"> 
 
    <div id="navigation-container"> 
 
     <ul> 
 
     <li><a href="index.html">Home</a></li> 
 
     <li class="dropdown"> 
 
      <a href="javascript:void(0)" class="dropbtn">Hosting</a> 
 
      <div class="dropdown-content"> 
 
      <a href="minecraft-hosting.html">Minecraft Hosting</a> 
 
      <a href="dedicated-hosting.html">Dedicated Hosting</a> 
 
      <a href="web-hosting.html">Website Hosting</a> 
 
     <li class="dropdown"> 
 
     <a href="javascript:void(0)" class="dropbtn">Login</a> 
 
     <div class="dropdown-content"> 
 
     <a href="#">Client Area</a> 
 
     <a href="#">Xeon Panel</a> 
 
     <a href="#">Cpanel</a> 
 
     </div> 
 
     </div> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</div> 
 
<div class="getstarted"> 
 
    <center> 
 
    <font size="6"> 
 
     <font color="white"> 
 
     <h3>HOSTING FOR EVERYONE</h3> 
 
     </font> 
 
    </font> 
 
    <font size="4"> 
 
     <font color="white"> 
 
     <p4>Want to get 10% off? Use code LAUNCH10</p4> 
 
     </font> 
 
    </font> 
 
    <br> 
 
    <button class="button">Get Started Now</button> 
 
    </center> 
 
</div> 
 
<div class="inner"> 
 
    <center> 
 
    <h2 class="title">About Us</h2> 
 
    <b> 
 
     <font size="4"> 
 
     <p3>We are Equinox Hosting, launched in 2017 with a passion for providing our customers with the highest quality services <br> and solutions at the lowest prices, affordable for everyone. We always try to answer support tickets & questions as<br> soon as possible, so if you do have any questions or queries regarding our services head to our contact page.</p3> 
 
     </font> 
 
    </b> 
 
    </center> 
 
</div>

+0

申し訳ありませんが、ご使用の例で問題が表示されません。 –

答えて

3

あなたは#ナビゲーションコンテナにrelative位置とz-index値を設定することで、この問題を解決することができます:ここで

#navigation-container { 
    width: 1200px; 
    margin: 0 auto; 
    height: 84px; 
    z-index: 1; 
    position: relative; 
} 

はあなたのjsfiddleの更新です:
https://jsfiddle.net/dekelb/wv9yvexu/

Y私たちの問題は、あなたのタイトル(​​)がメニューを引き継ぐ(またはその要素の背後にあるメニュー)ので、hoverそのタイトル - menuは "ホバート"されずに再び隠されるということです。

上記のCSSの変更によりこれが解決されます。

+0

ご協力ありがとうございます、それは動作します! –

関連する問題