複数のボタンが含まれているウェブサイトの上部にナビバーを作成しました。今すぐボタンの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>
@Fogest - StackOverflowで質問を確実にするために、このChromeの問題に関連するHTMLとCSSを含めることができますか? (または問題が実際に見られる場所へのリンク) – danlefree
これを修正するのに役立つ記事が他に必要な場合は、お気軽にお問い合わせください! – ComputerLocus
うまくいけばコードが追加されました! – ComputerLocus