我做了一個菜單,但我有一個「UL」 tag.Here的我的代碼頂部的問題:問題有UL標籤的頂部
var a = document.getElementById("hide");
var outside = "false";
var verid = "false";
function showjs() {
if (verid === "false") {
if (visibil() === "false") {
a.style.display = "inline-block";
} else {
batchleave(0);
}
}
}
function hidejs() {
if (visibil() === "true" & outside === "true") {
batchleave(0);
}
}
function visibil() {
if (a.style.display === "none") {
return "false";
} else {
return "true";
}
}
function batchleave(x) {
setTimeout(function() {
x++;
a.style.opacity = "0." + (10 - x);
if (10 - x === 0) {
a.style.display = "none";
}
if (x < 10) {
batchleave(x);
}
}, 30);
}
function batch() {
var projects = ["Batch Script Tutorial", "Manage your PC", "Yahoo joke"];
var text = "";
var i;
for (i = 0; i < projects.length; i++) {
text += "<li><a href='http://www.programming-multilang.tk/p/" + helpbatch(i, projects) + ".html'>" + projects[i] + "</a></li>" + '<hr style="border-color: rgb(61, 34, 126)">';
}
document.getElementById("hide").style.opacity = "1";
document.getElementById("hide").innerHTML = text;
}
function helpbatch(vari, storage) {
var a = storage[vari].split(" ");
var fin = "";
for (i = 0; i < a.length; i++) {
if (i < a.length - 1) {
fin += a[i].toLowerCase() + "-";
} else {
fin += a[i].toLowerCase();
}
}
return fin;
}
.project {
background-color: #5318a0;
box-shadow: 2px 2px 3px black;
color: #efedf2;
font-family: helvetica, sans-serif;
font-size: 20px;
font-weight: normal;
padding: 7px 15px;
cursor: pointer;
}
.project:link {
background-color: #5318a0;
border-radius: 2px;
box-shadow: 2px 2px 3px black;
color: #efedf2;
font-family: helvetica, sans-serif;
font-size: 20px;
font-weight: normal;
padding: 7px 15px;
}
.project:visited {
background-color: #5318a0;
border-radius: 2px;
box-shadow: 2px 2px 3px black;
color: #efedf2;
font-family: helvetica, sans-serif;
font-size: 20px;
font-weight: normal;
padding: 7px 15px;
}
.project:hover {
background-color: #8358ba;
border-radius: 2px;
box-shadow: 2px 2px 3px black;
color: #efedf2;
font-family: helvetica, sans-serif;
font-size: 20px;
font-weight: normal;
padding: 7px 15px;
}
.project:active {
background-color: #462076;
border-radius: 2px;
box-shadow: 2px 2px 1px white;
color: #efedf2;
font-family: helvetica, sans-serif;
font-size: 20px;
font-weight: normal;
padding: 5px 13px;
}
.menu ul {
list-style: none;
}
.menu li {
position: relative
}
.cl-menu,
ul {
margin: 0;
padding: 0
}
.menu {
display: inline-block
}
#hide>li {
white-space: nowrap;
}
#hide {
display: none;
position: absolute;
top: 0;
left: 100%;
background-color: #300a62;
box-shadow: 2px 2px 3px black;
color: aliceblue;
line-height: 1.5;
padding: 10px;
z-index: 10;
margin: 0
}
<div class="menu">
<ul id="cl-menu">
<li onclick="showjs();batch()" onmouseleave="outside='true';" onmouseenter="outside='false';" id="batch" title="Press to see the projects"><span class="project">Project</span>
<ul id="hide" onmouseenter="verid='true';" onmouseleave="verid='false';">
</ul>
</li>
</ul>
</div>
我想js也有問題。 帶id =「hide」的ul會給我帶來一些問題,我該如何解決這個問題?
頂部什麼,到底是什麼意思的「頂部」? – adeneo 2015-02-05 23:02:20
我想讓它們對齊 – 2015-02-05 23:02:51