有人可以幫我做一個跨瀏覽器下拉導航欄嗎？

我正在處理我的tumblr主題。我想知道是否有人可以幫助我創建一個非常簡單的下拉式導航欄，它可以在所有瀏覽器中運行，儘可能使用盡可能少的CSS。有人可以幫我做一個跨瀏覽器下拉導航欄嗎？

2011-05-04 James Charless Dickinson

第一個結果google搜索「下拉菜單導航」：HTTP：// WWW。 noupe.com/css/multilevel-drop-down-navigation-menus-examples-and-tutorials.html – Dominic 2011-05-04 20:22:26

沒有我知道的純粹的CSS解決方案。然而，如果你喜歡把你的手弄髒，這將工作：

<html> 
<head> 
<style> 
#menu { 
display: none; 
} 
</style> 
<title>HI</title> 
</head> 
<body> 
<div id="out" style="background-color: blue; width:100px; height: 50px; user-select: none;-webkit-user-select:none"> 
Rollover me! 
<div id="menu"> 
<ul> 
<li>Menu</li> 
<li>Blog</li> 
<li>Contact</li> 
</ul> 
</div> 
</div> 
<script type="text/javascript"> 
function show(event) { 
drop = document.getElementById('menu'); 
drop.style.cssText = 'display: block'; 
} 
function hide(event) { 
drop = document.getElementById('menu'); 
drop.style.cssText = 'display: none'; 
} 

menu = document.getElementById("out"); 
menu.addEventListener("mouseover", show, false); 
menu.addEventListener("mouseout", hide, false); 

</script> 
</body> 
</html>

不知道有多少Javascript tumblr允許。

來源

2011-05-04 21:44:16 IslandCow

閱讀關於A List Apart的古老但仍然相關的Suckerfish Dropdowns文章。

這是我第一次學習純CSS的菜單，其中的Javascript增強了瀏覽器，但沒有正確的CSS。

來源

2011-05-04 21:21:36

@IslandCow：當然有一個CSS唯一的解決辦法：

檢查this out：

<div id="nav"> 
    <div>Main Nav</div> 
    <div><a href="http://www.google.com">Sub nav 1</a></div> 
    <div><a href="http://www.google.com">Sub nav 2</a></div> 
    <div><a href="http://www.google.com">Sub nav 3</a></div> 
</div> 

<style> 
    #nav{ 
     background-color:#8be; 
     width:120px; 
     height:20px; 
     overflow:hidden; 
    } 
    #nav:hover{ 
     height:80px; 
    } 
</style>

Version 2

來源

2011-05-04 22:01:19

有人可以幫我做一個跨瀏覽器下拉導航欄嗎？

回答

相關問題