0
我有第一个文本框自动完成的搜索页面，但是当我开发它时，我发现主菜单样式的ul/li CSS类正在影响JavaScript列表。如何覆盖菜单的样式以显示正常列表？
我是一名初学者程序员，所以任何帮助 - 编码建议 - 也将非常有用！如何覆盖JavaScript自动完成的CSS ul菜单？
这里的页面代码：
<!DOCTYPE html>
<html>
<head>
<title>GameEnkaku - Homepage</title>
<link rel="stylesheet" type="text/css" href="CSS/bodyStyle.css"/>
<link rel="stylesheet" type="text/css" href="CSS/menuStyle.css"/>
<link rel="stylesheet" type="text/css" href="CSS/flexStyle.css"/>
<link rel="stylesheet" type="text/css" href="CSS/fonts.css"/>
<link rel="stylesheet" type="text/css" href="CSS/tableRightStyle.css"/>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
$(function() {
var aziende = [
"APh Technology Consultants",
"Advanced Microcomputer Systems",
"Atari",
"Bill Pitts e Hugh Tuck",
"Bullet-Proof Software, Nintendo",
"Bungie",
"Bungle, Gearbox, MacSoft Games",
"Capcom",
"Cing",
"Core Design",
"Crystal Dynamics",
"DMA Design",
"Electronic Arts Tiburon",
"Extended Play Productions",
"Game Freak",
"Ganbarion",
"Good Science Studio",
"Gottlieb",
"HAL Laboratory",
"Intelligent Systems",
"Intelligent Systems, Nintendo SPD",
"Kee Games",
"Konami",
"Konami, Factor 5",
"Konami, Ultra Games"
];
$("#aziende").autocomplete({source: aziende});
});
</script>
</head>
<body>
<div class="flex-container">
<header>
<div class="wrapper"><img class="resize" src="Immagini/homepageWallpaper.jpg" alt="Promo"></div>
<img class="logo" src="Immagini/logo.png" alt="GameEnkaku Logo">
<ul>
<li><a href="homepage.html">Home</a></li>
<li><a href="#">La Storia ▾</a>
<ul class="dropdown">
<li><a href="origini.html">Le origini</a></li>
<li><a href="anni60-70.html">Anni '60 e Anni '70</a></li>
<li><a href="anni80-90.html">Anni '80 e Anni '90</a></li>
<li><a href="anni2000.html">Il nuovo<br>Millennio</a></li>
<li><a href="anni2010.html">Il Futuro</a></li>
</ul>
</li>
<li><a href="#"> Le Console ▾ </a>
<ul class="dropdown">
<li><a href="generazione1.php">I generaz.</a></li>
<li><a href="generazione2.php">II generaz.</a></li>
<li><a href="generazione3.php">III generaz.</a></li>
<li><a href="generazione4.php">IV generaz.</a></li>
<li><a href="generazione5.php">V generaz.</a></li>
<li><a href="generazione6.php">VI generaz.</a></li>
<li><a href="generazione7.php">VII generaz.</a></li>
<li><a href="generazione8.php">VIII generaz.</a></li>
<li><a href="generazione9.php">Uscite future</a></li>
</ul>
</li>
<li><a href="#">Videogiochi ▾</a>
<ul class="dropdown">
<li><a href="arcadeLista.php">Arcade</a></li>
<li><a href="cartucceLista.php">Cartucce</a></li>
<li><a href="cdLista.php">CD/DVD</a></li>
<li><a href="downloadLista.php">Digital Download</a></li>
</ul>
</li>
<li><a href="#">Approfondimenti ▾</a>
<ul class="dropdown">
<li><a href="letteratura.html">I videogiochi e la letteratura</a></li>
<li><a href="multiplayer.html">Il multiplayer online</a></li>
<li><a href="eSports.html">What are eSports?</a></li>
<li><a href="curiosita.html">Curiosità e risorse</a></li>
</ul>
</li>
<li><a href="ricerca.php">Ricerca</a></li>
</ul>
</header>
<section class="content">
<div class="article">
<h2>Ricerca nel Database</h2>
Inserire solo il campo rispetto a cui si intende eseguire la ricerca<br><br>
<FORM name=form1 action="risultati_ricerca.php" method="post">
<label for="aziende">Sviluppatore/azienda: </label>
<input id="aziende" type="text" name=aziende><br><br>
<!--<INPUT id="aziende" >!-->
Anno di uscita:
<INPUT type="text" name=ANNO><br><br>
Genere videogioco:
<INPUT type="text" name=GENERE><br><br>
Modalità videogioco:
<INPUT type="text" name=MODALITA><br><br>
<input type="reset" value="Reimposta">
<input type="submit" value="Cerca">
</FORM>
</div>
</section>
<footer>
<table>
<tr>
<th>La Storia</th>
<th>Le Console</th>
<th>Videogiochi</th>
<th>Approfondimenti</th>
</tr>
<tr>
<td><a href="origini.html">Le origini</a></td>
<td><a href="generazione1.php">I generazione</a></td>
<td><a href="arcadeLista.php">Arcade</a></td>
<td><a href="letteratura.html">I videogiochi e la letteratura</a></td>
</tr>
<tr>
<td><a href="anni60-70.html">Anni '60 e Anni '70</a></td>
<td><a href="generazione2.php">II generazione</a></td>
<td><li><a href="cartucceLista.php">Cartucce</a></li></td>
<td><li><a href="multiplayer.html">Il multiplayer online</a></li></td>
</tr>
<tr>
<td><a href="anni80.html">Anni '80 e Anni'90</a></td>
<td><a href="generazione3.php">III generazione</a></td>
<td><a href="cdLista.php">CD/DVD</a></td>
<td><a href="eSports.html">What are eSports?</a></td>
</tr>
<tr>
<td><a href="anni2000.html">Il nuovo Millennio</a></td>
<td><a href="generazione4.php">IV generazione</a></td>
<td><a href="downloadLista.php">Digital Download</a></td>
<td><a href="curiosita.html">Curiosità e risorse</a></td>
</tr>
<tr>
<td><a href="anni2010.html">Il Futuro</a></td>
<td><a href="generazione5.php">V generazione</a></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td><a href="generazione6.php">VI generazione</a></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td><a href="generazione7.html">VII generazione</a></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td><a href="generazione8.php">VIII generazione</a></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td><a href="generazione9.php">Uscite future</a></td>
<td></td>
<td></td>
</tr>
</table>
<p class="footerp">GameEnkaku - Angela Bertoncini - 2016</p>
</footer>
</div>
<body>
<html>
这里的CSS菜单样式：
/*Fonts area*/
@font-face {
font-family: "Neuropol";
src: url("Fonts/neuropol.ttf")
format("truetype");
}
/*Fonts area*/
ul{
padding: 0;
list-style: none;
border-style: solid none;
border-color: lightblue;
background: #f2f2f2;
}
ul li{
display: inline-block;
position: relative;
line-height: 21px;
text-align: left;
}
ul li a{
font-family: "Neuropol";
display: block;
padding: 8px 25px;
color: #333;
text-decoration: none;
}
ul li a:hover{
color: #fff;
background: #0066ff;/*#939393;*/
}
header ul li ul.dropdown{
min-width: 125px; /* Set width of the dropdown */
background: #f2f2f2;
display: none;
position: absolute;
z-index: 999;
left: 0;
}
ul li:hover ul.dropdown{
display: block; /* Display the dropdown */
}
ul li ul.dropdown li{
display: block;
}
您还可以在this link
CloudFlare的兑现欺骗了我，因为它没有显示我的修改，直到我禁用它。现在它完美的工作！非常感谢你的帮助！ – Yozora