台灣最大程式設計社群網站
線上人數
1628
 
會員總數:244781
討論主題:188836
歡迎您免費加入會員
討論區列表 >> CSS/HTML5/Bootstarp >> 網站navbar加入下拉式選單
[]  
[我要回覆]
1
回應主題 加入我的關注話題 檢舉此篇討論 將提問者加入個人黑名單
網站navbar加入下拉式選單
價值 : 20 QP  點閱數:419 回應數:5

樓主

testuser
門外漢
0 2
26 3
發送站內信

請問原本網站的navbar沒有下拉選單
在這個網址找到一個範例
https://www.w3schools.com/howto/howto_css_dropdown_navbar.asp
我只在原本網站的css貼上dropdown的css
然後直接在html加入dropdown的class
加入後有出現下拉選單,但是下拉選單不會跟其他的按鈕在同一排
會換到下一排去,請問是否哪有其他要修改的地方,謝謝


HTML:


CSS:
<style>

.nav{
width:1400px;
margin:0 auto;
height:80px;
border:#333333 solid 0px;
}

.nav_button{
vertical-align:top;
padding:28px 10px;
display:inline-block;
font-size: 18px;
font-weight: 500;
font-family: 微軟正黑體;
cursor:pointer;
color: #fff;
border:#333333 solid 0px;
}

.nav_button:hover{
background-color:#399;
}

.nav_title{
width:550px;
margin:0 auto;
height:300px;
padding-top:80px;
padding-left:550px;
border:#333333 solid 0px;
color:#399;
font-size:60px;
font-family:微軟正黑體;
text-shadow: 0px 0px 5px #fff, 0px 0px 5px #fff, 0px 0px 5px #fff, 0px 0px 5px #fff, 0px 0px 5px #fff, 0px 0px 5px #fff, 0px 0px 5px #fff;
}


a{ color:#0713E3; text-decoration:none; }


/* The dropdown container */
.dropdown {

overflow: hidden;
}

/* Dropdown button */

.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;

background-color: inherit;
font-family: inherit; /* Important for vertical align on mobile phones */
margin: 0; /* Important for vertical align on mobile phones */
}

/* Add a red background color to navbar links on hover */
.nav a:hover, .dropdown:hover .dropbtn {

}

/* Dropdown content (hidden by default) */

.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}

/* Links inside the dropdown */

.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}

/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
background-color: #ddd;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}

</style>

搜尋相關Tags的文章: [ 下拉 ] , [ navbar ] , [ menu ] , [ dropdown ] ,
本篇文章發表於2018-08-23 16:17
別忘捐VP感謝幫助你的人 新手會員瞧一瞧
1樓
回應

彩虹
檢舉此回應
建議你再重新複製一次,一步一步做調整,確認會不會跑版

主要是因為你有把一些原本的css拿掉,然後卻又加了一些css進去,所以顯示結果才會跟範例不一樣

例如


如果你要拿掉的話,你可以加入 「display:inline-block;」,如下





本篇文章回覆於2018-08-23 17:30
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
2樓
作者回應

testuser
檢舉此回應


謝謝回覆 重新貼一次
但float: left; 這個有沒有拿掉好像都不影響,還是會換行
css沒有加入其它的
只有放dropdown的css
但nav的css是原本網站的
懷疑是這樣兩個搭不起來
本篇文章回覆於2018-08-23 17:44
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
3樓
最有價值解答

彩虹
檢舉此回應
是呀,一定會搭不起來!
你認真看的話你會知道問題在哪裡
但是我覺得你對css其實不熟,你可能也不知道 <div> 換行的原因

所以我剛剛不是有給你另一個方式嗎?
把 float: left; 拿掉
改成如下

或者下拉 div 區塊,改成用 span 來包,如下



但在你不熟css的奇況下,我是會建議你直接採用範例網站為主,拿範例再去做修改,這樣子對你比較輕鬆
Dropdown Menu in Navbar
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_dropdown_navbar

如果一樣不行的話,我是建議你直接把這整頁面的程式碼複製上來
因為可能不只這部分的程式碼會影響到
本篇文章回覆於2018-08-23 18:50
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
4樓
回應

彩虹
檢舉此回應
另外,你也可以去參考範例的 .navbar 跟你的 .nav 差別
然後補在你的css裡面

範例的 .navbar a { float: left; } 跟 .dropdown 有同時採用 float:left ,才能達到排在同一列
你的沒有 .nav {} 則沒有

我覺得你在整合 css 部分,要再多做一些心思去細看
本篇文章回覆於2018-08-23 18:57
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
5樓
作者回應

testuser
檢舉此回應
改了您提供的方法後 好像可以了 我會再多學習css的整合 謝謝大大
本篇文章回覆於2018-08-24 09:21
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
   
1

回覆
如要回應,請先登入.