[問題] div向下對齊的問題
各位板友好 有些問題請教一下～
用div作了一個選單列 上面有link1~link7的選項
然後當滑鼠移過去的時候 選項會變大
實做後如以下網址：(原始碼附在最後）
http://www.dinkypage.com/141521
但遇到了一些狀況 懇請板友指導一下 m(_ _)m
當滑鼠移到link1~7其中之一時
旁邊其他選項會隨著往上跑而沒有貼齊桃紅色方塊的下緣
類似像這樣 ▆▆▆▆▃▆▆↖
請問該怎麼作能讓所有選項一直貼著桃紅色方塊的下緣呢
▃▃▃▃▆▃▃↙
或者想要實現上述想法是否有更好的寫法
謝謝
以下是網頁原始碼
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html><html xmlns="" rel="nofollow">http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>test</title>
<style type="text/css">
#bg_head {
background-color: fuchsia;
position: relative;
width: 970px;
height: 259px;
}
.nav-menubar{
position: absolute;
bottom: 0px;
width:100%;
}
.nav-menu{
display:inline-block;
background:black;
color:white;
height:45px;
width:12%;
transition: all 0.4s ease 0s;
-moz-transition: all 0.4s ease 0s;
-webkit-transition: all 0.4s ease 0s;
-o-transition: all 0.4s ease 0s;
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
}
.nav-menu:hover{
height:60px;
width:15%;
opacity:1;
filter:alpha(opacity=100); /* For IE8 and earlier */
}
</style></head>
<body>
<div id="bg_head">
<div class="nav-menubar">
<div class="nav-menu">link 1</div>
<div class="nav-menu">link 2</div>
<div class="nav-menu">link 3</div>
<div class="nav-menu">link 4</div>
<div class="nav-menu">link 5</div>
<div class="nav-menu">link 6</div>
<div class="nav-menu">link 7</div>
</div>
</div>
<span>test1</span> <span>test2</span>
</body>
</html>
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 114.24.66.4
推
02/14 17:37, , 1F
02/14 17:37, 1F
推
02/14 17:41, , 2F
02/14 17:41, 2F
→
02/14 17:47, , 3F
02/14 17:47, 3F
※ 編輯: uoyihc 來自: 114.24.66.4 (02/16 07:53)
討論串 (同標題文章)