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