我有一个第一个文本框带有自动完成功能的搜索页面，但是在开发它时，我发现用于主菜单样式的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;
}
您也可以在此链接找到原始页面
将以下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;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句