I have made a navbar at the top of my website which contains multiple buttons. One of the buttons right now I added a dropdown menu. It simply uses a unordered list with list items in with a little CSS coding to make it have some colour and actually be hidden until hovered. This works, I have tried it on IE and FF. Both work fine. Now Google Chrome when I try it there, there are some issues.
On hover the items appear which they should. But when I try and click on them they disappear. I've also been on another site and have had this issue though I did not code it in that case. I'm assuming this is a Chrome issue, but I also assume that there is something I can do to fix this on my site.
My question is how do I fix this issue on Chrome (Looking at the code not the browser though)?
Note: If I do a hard refresh (CTRL+SHIFT+R) I am able to hover over the things fine. Once I click on a link or perform a normal refresh again though the issue comes back. Obviously I don't want to have to do a hard refresh to click an item in the dropdown nor would users of the site want to.
Edit: Here is a link to where you can look at the problem on my websites testing area: Testing Area
Edit2: Since I'm getting no responses I will include the code.
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>
