Я сделал навигационную панель вверху моего сайта, которая содержит несколько кнопок. Одной из кнопок прямо сейчас я добавил выпадающее меню. Он просто использует неупорядоченный список с элементами списка с небольшим CSS-кодированием, чтобы сделать его немного цветным и фактически скрытым до наведения. Это работает, я пробовал на IE и FF. Оба работают нормально. Теперь Google Chrome, когда я пытаюсь там, есть некоторые проблемы.
При наведении появляются предметы, которые они должны. Но когда я пытаюсь нажать на них, они исчезают. Я также был на другом сайте и имел эту проблему, хотя я не кодировал ее в этом случае. Я предполагаю, что это проблема Chrome, но я также предполагаю, что есть что-то, что я могу сделать, чтобы исправить это на моем сайте.
У меня вопрос, как мне исправить эту проблему в Chrome (хотя, глядя на код, а не в браузере)?
Примечание: если я делаю жесткое обновление (CTRL + SHIFT + R), я могу навести курсор на все вещи. Как только я нажимаю на ссылку или снова выполняю обычное обновление, проблема возвращается. Очевидно, что я не хочу делать жесткое обновление, чтобы щелкнуть элемент в раскрывающемся списке, и пользователи сайта не захотят.
Редактировать: вот ссылка, где вы можете посмотреть на проблему в области тестирования моих сайтов:
Зона испытаний
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>