如何覆盖CSS ul菜单以实现JavaScript自动完成功能？
[英]How can I override the CSS ul menu for the JavaScript autocomplete?
问题描述
我有一个第一个文本框带有自动完成功能的搜索页面，但是在开发它时，我发现用于主菜单样式的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;
}
您也可以在此链接找到原始页面
1 个解决方案
解决方案1
1 已采纳 2016-07-02 17:52:53
将以下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;
}
我如何访问 css 上的第二个 ul 标签以使用 javascript 更改样式
[英]How i access to the second ul tag on css to change style with javascript
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.