Выпадающее меню с использованием CSS

Я пытаюсь создать выпадающее меню, подобное изображению . Я близка, но есть несколько вещей, которые я не могу понять. - Как добавить строки между каждым элементом в списке? - Как я могу сделать начало списка из-под «SELECT».Выпадающее меню с использованием 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 { 
 
\t background:url('sidearrow.png') no-repeat left; 
 
} 
 

 
.dropdown-content a:hover { 
 
\t background:url('sidewhite.png') no-repeat left; 
 
\t background-color: rgb(255,131,0); 
 
\t 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"> 
 
    \t <div id="arrow"> 
 
    \t \t <img src="arrow.png" width="29" height="27" alt=""/> 
 
\t </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>

источник

2016-11-07 Maddy

@SebastianBrosch вы можете объяснить, как это похоже? – Maddy

Вам все еще нужно настроить некоторые размеры, но это работает:

.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 { 
 
    
 
\t background:url('sidearrow.png') no-repeat left; 
 
} 
 

 
.dropdown-content a:hover { 
 
\t background:url('sidewhite.png') no-repeat left; 
 
\t background-color: rgb(255,131,0); 
 
\t 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"> 
 
    \t <div id="arrow"> 
 
    \t \t <img src="arrow.png" width="29" height="27" alt=""/> 
 
\t </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>

источник

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; 
 
} 
 

 
.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 { 
 
\t background:url('sidearrow.png') no-repeat left; 
 
} 
 

 
.dropdown-content a:hover { 
 
\t background:url('sidewhite.png') no-repeat left; 
 
\t background-color: rgb(255,131,0); 
 
\t 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"> 
 
    \t <div id="arrow"> 
 
    \t \t <img src="arrow.png" width="29" height="27" alt=""/> 
 
\t </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>

источник

2016-11-07 13:50:40 staticvoidmain

@Mani -Пожалуйста, добавьте

между опциями выбора. – staticvoidmain

Благодарим вас за ввод данных, но как я могу сделать это начало из-под выбора так же, как и изображение. Также, если вы могли бы объяснить, почему наведение (оранжевое) не охватывает всю область элементов выбора – Maddy

.dropdown-content {мин. -width: 180px;} – staticvoidmain

Вы можете просто добавить border-bottom: 1px solid black и вы сделали.

Working 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>

источник

2016-11-07 13:54:18 reshad

благодарим вас за ввод. Как я могу сделать начало списка элементов таким же образом на картинке. Мои избранные списки элементов начинаются со стороны, где я хочу, чтобы она была внизу. – Maddy

@mani приветствуется. что вы имеете в виду? вы имеете в виду, что он должен начинаться прямо под выбором? – reshad

Проверить это обеспечить ниже jsfiddle, внести изменения в ваших .dropdown-content т.е. добавить left и margin значений и установите его z-index значение -1, теперь, чтобы добавить границу, вы можете используйте border-bottom в .dropdown-content a.

jsFiddle

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

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

источник

2016-11-07 13:55:56 frnt

.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; 
 
\t 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); 
 
\t 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{ 
 
\t \t padding-top: 30px; 
 
} 
 
.dropdown-content a { 
 
    table-layout: fixed; 
 
    color: black; 
 
    padding: 12px 16px 13px 30px; 
 
    text-decoration: none; 
 
    display: block; 
 
} 
 
\t .dropdown-content a{ 
 
    border:1px solid #000; 
 
    border-bottom:0; 
 
\t } 
 
.dropdown-content a:last-child{ 
 
    border-bottom:1px solid #000; 
 
    } 
 
.dropdown a { 
 
\t background:url('sidearrow.png') no-repeat left; 
 
} 
 

 
.dropdown-content a:hover { 
 
\t background:url('sidewhite.png') no-repeat left; 
 
\t background-color: rgb(255,131,0); 
 
\t 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"> 
 
    \t <div id="arrow"> 
 
    \t \t <img src="arrow.png" width="29" height="27" alt=""/> 
 
\t </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>

источник

2016-11-07 14:55:48

Надеюсь, это сработает для вас –

Выпадающее меню с использованием CSS

ответ

Смежные вопросы