我有第一个文本框的自动完成搜索页面，但是当我开发它时，我发现主菜单样式的ul / li CSS类正在影响JavaScript列表。如何覆盖菜单样式以显示正常列表？ 我是初学程序员，所以任何帮助 - 也是编码建议 - 都会非常有用！
这是页面的代码：
<!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
找到原始页面答案 0 :(得分：1)
将以下CSS添加到您的样式底部。
.ui-widget-content {
max-width:250px;
}
.ui-widget-content li{
display:block;
padding:10px;
border-bottom: 1px solid grey;
}
.ui-menu-item.ui-state-focus{
background:#0066FF;
color:white;
}