2012-02-19 12 views
1

複数のボタンが含まれているウェブサイトの上部にナビバーを作成しました。今すぐボタンの1つにドロップダウンメニューを追加しました。それは、単純にリスト項目を持つ小さなリストを使用して、少し色づけして実際に隠されるまで隠すようにしています。これは動作します、私はIEとFFでそれを試してみました。両方とも正常です。今私はそこに試してみると、いくつかの問題がGoogle Chromeです。Chromeのドロップダウンメニューの問題 - 適切に削除されない

ホバーでは、項目が表示されます。しかし、私がそれらを試してクリックすると、それらは消えます。私はまた、別のサイトにいましたが、この場合はコードを作成しませんでしたが、この問題が発生しました。私はこれがChromeの問題であると仮定していますが、私は自分のサイトでこれを修正するために何かできることがあるとも仮定しています。

私はこの問題をChromeでどのように修正するのですか(ブラウザではなくコードを見て)

注:ハードリフレッシュ(CTRL + SHIFT + R)を実行すると、物事をうまく上書きすることができます。問題が戻っても、リンクをクリックするか、通常のリフレッシュをもう一度実行します。明らかに、私はドロップダウンリスト内の項目をクリックするためのハードリフレッシュをしたり、サイトのユーザーがしたいことを望んでいません。

編集: Testing Area

EDIT2:ここでは、私のウェブサイトのテスト領域に問題を見ることができる場所へのリンクがあり、私は何の回答を得ていないよので、私はコードが含まれます。

のindex.php:


<?php session_start(); ?> 
<!DOCTYPE HTML> 
<html lang="en"> 
    <head> 
     <title>Home</title> 
     <meta http-equiv="Content-Type" content="text/html;charset=utf-8" > 
     <link rel="stylesheet" type="text/css" href="style.css" /> 
      <link href="navbar.css" rel="stylesheet" type="text/css" /> 
    </head> 
    <body>  
     <?php include_once("analyticstracking.php") ?> 
     <?php include("header.php"); ?> 
      <p class="content" >Welcome to my homepage! This page will feature a wide range of things from video tutorials to help forums. </p> 
      <p class="content" ><em>Remember the site is currently being devopled still! Check out the "<a href="contact.php">Contact Us</a>" button on the left if you have any bugs to report.</em></p> 
     <?php include("footer.php"); ?> 
    </body> 
</html> 

style.cssに:


b{ 
    color:#000000; 
} 
a{ 
text-decoration:none; 
color:#666; 
} 
img{ 
display:block; 
margin:auto; 
} 
p.welcome { 
    text-align:center; 
    font-family: “verdana”; 
    font-size:1.875em; 
    color:white; 
    font-weight:900;    
} 
p.content { 
    font-family: “verdana”; 
    font-size:1em; 
    color:white; 
} 
div.main{ 
    width:75%; 
    margin:auto; 
    background:black; 
} 
div.row1{ 
width:100%; 
} 
div.row2{ 
width:100%; 
} 
div.row2col1{ 
    float:left; 
    margin:0; 
    padding:1em; 
    color:white; 
} 
div.row2col2{ 
    margin-left:10%; 
    margin-right:10%; 
    background-color:brown; 
    padding:1em; 
    border:15px solid #212121; 
} 
body{ 
    background-color:#393635; 
    color:white; 
} 
p.footer{ 
    text-align:right; 
} 
.clearFloat{ 
    clear:both; 
    margin:0; 
    padding:0; 
} 

header.phpの:


<div class="main"> 
    <div class="row1"> <a href="index.php"><img src="logo.png" alt="Logo"/></a> 
</div> 
     <div class="navMenu">     
       <ul> 
        <li><a href="index.php">Home</a></li> 
        <li><a href="videos.php">Videos</a> 
         <ul> 
         <li><a href="videolatest.php">Latest Videos</a></li> 
         <li><a href="videotutorial.php">Tutorials</a></li> 
         <li><a href="videogaming.php">Gaming</a></li> 
         <li><a href="videocoding.php">Coding</a></li> 
         </ul> 
        </li> 
        <li><a href="about.php">About</a></li> 
        <li><a href="contact.php">Contact</a></li> 
       </ul> 
       <br class="clearFloat" /> 
     </div> 
     <div class="row2col2"> 

footer.php


  </div> 
Copyright Fog Productions 2012 
</div> 
+0

@Fogest - StackOverflowで質問を確実にするために、このChromeの問題に関連するHTMLとCSSを含めることができますか? (または問題が実際に見られる場所へのリンク) – danlefree

+0

これを修正するのに役立つ記事が他に必要な場合は、お気軽にお問い合わせください! – ComputerLocus

+0

うまくいけばコードが追加されました! – ComputerLocus

答えて

2

私はアンカーとサブリストの間に小さな隙間が、それが消えて引き起こしている、伝えることができるものからリストを引き起こしていますあなたがアンカーの上を少しだけホバリングするのを止めると消える。

サブリストの位置を2px(下)に減らしてアンカーに接触するようにテストすることができました。したがって、サブリストの上にホバーする前にアンカーを離れることはありません。

.navmenu li ul { 
    top: 30px; /* instead of 32 */ 
} 
+0

私は完全に整列させるために32を使用していました。あなたがそれをよく見ると30になると、それはちょっとしたもので、ボタンと並んでいないことが分かります。私はこれを試して、それが動作するかどうかを確認します。 – ComputerLocus

+0

うわー、私はちょうどこれをやってみる機会があります。これで問題は解決しました。私はこれがそれに影響を与えたとは思えません。あなたがよく見ていれば、それは主なビデオ要素から外れていますが、それが私がそれをうまく整列させるために32で持っていた理由です。私はこの問題を無視しなければならないと思う。 – ComputerLocus

1

デモサイトをChromeブラウザでテストしたところ、メニューは正しく機能していました。私は何度か試して、上記の "消えているメニュー"の問題を再現できませんでした(すべてのメニューリンクをクリックできました)

あなたのChromeは最新ですか?レンチアイコン> Google Chromeについてをクリックすると表示されます。最新のバージョン(この時点で)は18です。0xxx

問題が解決しない場合は、すべてのアドオンを無効にして、キャッシュをクリアしてもう一度テストしてみてください。アドオンを無効にするには、レンチアイコン>設定>拡張機能タブ

+0

うーん、編集を見ると、私はそれにいくつかの変更を加えました。たぶん私はそれを修正し、私はキャッシュをクリアする必要があります。 – ComputerLocus

+0

これは問題ではありませんでしたが、手伝ってくれてありがとう! – ComputerLocus

+0

問題ありません、うれしいです。 – crazymatt

関連する問題