堆棧內存溢出
  簡體   English   中英

使用CSS樣式下拉菜單

[英]Styling dropdown using CSS

 原文  2016-11-07 13:42:35  8   5    html/ css

問題描述

我正在嘗試將下拉菜單設置為類似於圖片的樣式 這里 。 我很親近，但有幾件事我無法弄清楚。 -如何在列表中的每個項目之間添加行-如何使列表從“選擇”下開始。

這個 是我到目前為止所擁有的。

沒有使用CSS的更好方法嗎？ 我對CSS很陌生。

我不確定我的問題如何類似。 如果有人可以解釋。 該職位與我要達到的目標沒有相似之處。 

 .dropbtn { color: white; width: 180px; padding: 16px; font-size: 16px; border: none; cursor: pointer; text-align: left; font-weight: 900; background: rgba(0, 173, 239, 1); border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 50px 50px 50px 50px; } .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); } .sphere { height: 45px; width: 45px; border-radius: 50%; vertical-align: top; /* position: relative; */ background: black; display: inline-block; margin-top: 5px; margin-left: -55px; } .dropdown-content a { table-layout: fixed; color: black; margin-left: 6px; padding: 12px 16px 13px 30px; text-decoration: none; display: block; } .dropdown a { background:url('sidearrow.png') no-repeat left; } .dropdown-content a:hover { background:url('sidewhite.png') no-repeat left; background-color: rgb(255,131,0); color:white; } .dropdown:hover .dropdown-content { display: block; } .dropdown:hover .dropbtn { background-color: #3e8e41; } div#arrow { position: absolute; margin-left: 10px; margin-top: 11px; } 
 <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="dropdown.css"> </head> <body> <h2>Dropdown Menu</h2> <p>Move the mouse over the button to open the dropdown menu.</p> <div class="dropdown"> <button class="dropbtn">SELECT</button> <div class="sphere"> <div id="arrow"> <img src="arrow.png" width="29" height="27" alt=""/> </div> </div> <div class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </div> </body> </html>

5 個解決方案

解決方案1
 1  2016-11-07 13:50:40

 .dropbtn { color: white; width: 180px; padding: 16px; font-size: 16px; border: none; cursor: pointer; text-align: left; font-weight: 900; background: rgba(0, 173, 239, 1); border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 50px 50px 50px 50px; } .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); } .sphere { height: 45px; width: 45px; border-radius: 50%; vertical-align: top; /* position: relative; */ background: black; display: inline-block; margin-top: 5px; margin-left: -55px; } .dropdown-content a { table-layout: fixed; color: black; margin-left: 6px; padding: 12px 16px 13px 30px; text-decoration: none; display: block; } .dropdown a { background:url('sidearrow.png') no-repeat left; } .dropdown-content a:hover { background:url('sidewhite.png') no-repeat left; background-color: rgb(255,131,0); color:white; } .dropdown:hover .dropdown-content { display: block; } .dropdown:hover .dropbtn { background-color: #3e8e41; } div#arrow { position: absolute; margin-left: 10px; margin-top: 11px; } 
 <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="dropdown.css"> </head> <body> <h2>Dropdown Menu</h2> <p>Move the mouse over the button to open the dropdown menu.</p> <div class="dropdown"> <button class="dropbtn">SELECT</button> <div class="sphere"> <div id="arrow"> <img src="arrow.png" width="29" height="27" alt=""/> </div> </div> <div class="dropdown-content"> <a href="#">Link 1</a><hr/> <a href="#">Link 2</a><hr/> <a href="#">Link 3</a><hr/> </div> </div> </body> </html>

解決方案2
 1  2016-11-07 13:54:18

您只需添加一個border-bottom: 1px solid black就可以了。

工作jsFiddle 

 .dropbtn { color: white; width: 180px; padding: 16px; font-size: 16px; border: none; cursor: pointer; text-align: left; font-weight: 900; background: rgba(0, 173, 239, 1); border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 50px 50px 50px 50px; } .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); } .sphere { height: 45px; width: 45px; border-radius: 50%; vertical-align: top; /* position: relative; */ background: black; display: inline-block; margin-top: 5px; margin-left: -55px; } .dropdown-content a { table-layout: fixed; color: black; margin-left: 6px; padding: 12px 16px 13px 30px; text-decoration: none; display: block; border-bottom: 1px solid black; } .dropdown a { background: url('sidearrow.png') no-repeat left; } .dropdown-content a:hover { background: url('sidewhite.png') no-repeat left; background-color: rgb(255, 131, 0); color: white; } .dropdown:hover .dropdown-content { display: block; } .dropdown:hover .dropbtn { background-color: #3e8e41; } div#arrow { position: absolute; margin-left: 10px; margin-top: 11px; } 
 <h2>Dropdown Menu</h2> <p>Move the mouse over the button to open the dropdown menu.</p> <div class="dropdown"> <button class="dropbtn">SELECT</button> <div class="sphere"> <div id="arrow"> <img src="arrow.png" width="29" height="27" alt="" /> </div> </div> <div class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </div>

解決方案3
 1  2016-11-07 13:55:56

在jsfiddle下方檢查此提供，在.dropdown-content進行更改，即添加left和margin值並將其z-index值設置為-1 ，現在要添加邊框，您可以在.dropdown-content a使用border-bottom 。

jsFiddle 

.dropdown-content{
    left:8px;
    margin-top:-5px;
    z-index:-1;
    ..........
    ..........
    ..........
}

.dropdown-content a {
 border-bottom:1px solid #111;
    ..........
    ..........
    ..........
}

解決方案4
 1 已采納  2016-11-07 14:00:08

您仍然需要調整一些大小，但是可以使用： 

 .dropbtn { color: white; width: 180px; padding: 16px; font-size: 16px; border: none; cursor: pointer; text-align: left; font-weight: 900; background: rgba(0, 173, 239, 1); border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 50px 50px 50px 50px; position: relative; z-index:2; } .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: relative; z-index:1; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); right: 5px; top:-20px; } .sphere { height: 45px; width: 45px; border-radius: 50%; vertical-align: top; /* position: relative; */ background: black; display: inline-block; position:relative; margin-top: 5px; margin-left: -55px; z-index:2; } .dropdown-content a { table-layout: fixed; color: black; margin-left: 6px; padding: 12px 16px 13px 30px; text-decoration: none; display: block; border: 1px solid #000; border-top: none; } .dropdown-content a:first-child { padding-top:22px; } .dropdown a { background:url('sidearrow.png') no-repeat left; } .dropdown-content a:hover { background:url('sidewhite.png') no-repeat left; background-color: rgb(255,131,0); color:white; } .dropdown:hover .dropdown-content { display: block; } .dropdown:hover .dropbtn { background-color: #3e8e41; } div#arrow { position: absolute; margin-left: 10px; margin-top: 11px; } 
 <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="dropdown.css"> </head> <body> <h2>Dropdown Menu</h2> <p>Move the mouse over the button to open the dropdown menu.</p> <div class="dropdown"> <button class="dropbtn">SELECT</button> <div class="sphere"> <div id="arrow"> <img src="arrow.png" width="29" height="27" alt=""/> </div> </div> <div class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </div> </body> </html>

解決方案5
 1  2016-11-07 14:55:48

 .dropbtn { color: white; width: 180px; padding: 16px; font-size: 16px; border: none; cursor: pointer; text-align: left; font-weight: 900; background: rgba(0, 173, 239, 1); border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 50px 50px 50px 50px; z-index:2; position:relative; } .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 177px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); margin-top:-20px; left:2px; z-index:0; } .sphere { height: 45px; width: 45px; border-radius: 50%; vertical-align: top; /* position: relative; */ background: black; display: inline-block; margin-top: 5px; margin-left: -55px; } .dropdown-content a:first-child{ padding-top: 30px; } .dropdown-content a { table-layout: fixed; color: black; padding: 12px 16px 13px 30px; text-decoration: none; display: block; } .dropdown-content a{ border:1px solid #000; border-bottom:0; } .dropdown-content a:last-child{ border-bottom:1px solid #000; } .dropdown a { background:url('sidearrow.png') no-repeat left; } .dropdown-content a:hover { background:url('sidewhite.png') no-repeat left; background-color: rgb(255,131,0); color:white; } .dropdown:hover .dropdown-content { display: block; } .dropdown:hover .dropbtn { background-color: #3e8e41; } div#arrow { position: absolute; margin-left: 10px; margin-top: 11px; } 
 <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="dropdown.css"> </head> <body> <h2>Dropdown Menu</h2> <p>Move the mouse over the button to open the dropdown menu.</p> <div class="dropdown"> <button class="dropbtn">SELECT</button> <div class="sphere"> <div id="arrow"> <img src="arrow.png" width="29" height="27" alt=""/> </div> </div> <div class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </div> </body> </html>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 樣式下拉CSS CSS下拉菜單樣式 CSS樣式下拉/右子菜單 具有下拉菜單樣式的CSS菜單 下拉菜單樣式問題 CSS 使用CSS樣式復選框 使用CSS設置標題樣式 使用CSS樣式表 使用CSS樣式問題 使用CSS樣式的樣式
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM