2015-02-05 86 views
1

我做了一個菜單,但我有一個「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會給我帶來一些問題,我該如何解決這個問題?

+1

頂部什麼,到底是什麼意思的「頂部」? – adeneo 2015-02-05 23:02:20

+0

我想讓它們對齊 – 2015-02-05 23:02:51

回答

2

display:block到你的span.project元素。默認情況下,<span>元素設置爲display:inline;

2

如果您只想將ul的頂部與菜單按鈕對齊。只要給你的#menu {top:-7px}

2

如果您只想將ul的頂部與菜單按鈕對齊。只要給你的#menu {top:-7p}這就是它..