RT，怎樣用html和CSS實作滑鼠滑過出現下拉選單，思路是什么？
uj5u.com熱心網友回復：
<!doctype html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta charset="UTF-8" />
<style type="text/css">
#menu,#menu ul {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu>li {
position: relative;
width: 100px;
height: 20px;
float: left;
background-color: #9ff;
transition: background-color 300ms;
}
#menu>li:hover {
background-color: #9cf;
}
#menu>li>ul {
position: absolute;
min-width: 100%;
top: 100%;
background-color: #cff;
max-height: 0px;
overflow: hidden;
opacity: 0;
transition: all 600ms;
}
#menu>li:hover>ul {
max-height: 120px;
opacity: 1;
}
#menu>li li:hover {
background-color: #99f;
}
</style>
</head>
<body>
<ul id="menu">
<li>選單1
<ul>
<li>子選單1-1</li>
<li>子選單1-2</li>
<li>子選單1-3</li>
<li>子選單1-3</li>
</ul>
</li>
<li>選單2
<ul>
<li>子選單2-1</li>
<li>子選單2-2</li>
<li>子選單2-3</li>
</ul>
</li>
</ul>
</body>
</html>
uj5u.com熱心網友回復：
js，css都可以實作， 思路就是把下拉串列位置定好，然后display: none。 滑鼠滑過就是hover事件，觸發顯示uj5u.com熱心網友回復：
好的，謝謝。轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/124135.html
標籤：HTML(CSS)