Растянуть li на всю ширину в ul с position: absolute
464
24 ноября 2016, 10:20
Имеется список.
При ховере на элементы списка происходит выделение:
Но если проскролить вправо, то получается вот такая ситуация:
т.е. элемент не растянут на всю ширину.
Как сделать так чтобы элемент растягивался на всю ширину ul и выделение было до конца скролла?
body {position: relative}
.dropdown-menu {
box-sizing: border-box;
min-width: 100% !important;
}
.dropdown-menu {
display: block;
}
.dropdown-menu {
overflow-y: auto;
max-height: 177px;
max-width: 100%;
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
list-style: none;
font-size: 13px;
background-color: #ffffff;
border: 1px solid #b9b9b9;
border-radius: 0;
box-shadow: 0 6px 12px rgba(0,0,0,0.175);
background-clip: padding-box;
}
* {
box-sizing: border-box;
}
ul{border: 1px solid red;}
.dropdown-menu li {
position: relative;
}
ul li {list-style-type: none;}
ul li:hover {background:red}
ul li a{
white-space:pre
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<ul class="dropdown-menu">
<li class="selected">
<a>Головное подразделение (654891238)</a>
</li><li>
<a> vasya</a>
</li><li>
<a> 1</a>
</li><li>
<a> 2</a>
</li><li>
<a> 3</a>
</li><li>
<a> 4</a>
</li><li>
<a> 5</a>
</li><li>
<a> 6</a>
</li><li>
<a> 7</a>
</li><li>
<a> 8</a>
</li><li>
<a> 9</a>
</li><li>
<a> 10</a>
</li><li>
<a> 11</a>
</li><li>
<a> 12</a>
</li><li>
<a> 13</a>
</li><li>
<a> 14</a>
</li><li>
<a> 15</a>
</li><li>
<a> 16</a>
</li><li>
<a> 17</a>
</li><li>
<a> 18</a>
</li><li>
<a> 19</a>
</li><li>
<a> 20</a>
</li><li>
<a> 21</a>
</li><li>
<a> 22</a>
</li><li>
<a> 23</a>
</li><li>
<a> 24</a>
</li><li>
<a> 25</a>
</li><li>
<a> 26</a>
</li><li>
<a> 27</a>
</li><li>
<a> 28</a>
</li><li>
<a> 29</a>
</li><li>
<a> 30</a>
</li><li>
<a> 31</a>
</li><li>
<a> 32</a>
</li><li>
<a> 33</a>
</li><li>
<a> 34</a>
</li><li>
<a> 35</a>
</li><li>
<a> 36</a>
</li><li>
<a> 37</a>
</li><li>
<a> 38</a>
</li><li>
<a> 39</a>
</li><li>
<a> 40</a>
</li><li>
<a> 41</a>
</li><li>
<a> 42</a>
</li><li>
<a> 43</a>
</li><li>
<a> 44</a>
</li><li>
<a> 45</a>
</li><li>
<a> 46</a>
</li><li>
<a> 47</a>
</li><li>
<a> 48</a>
</li><li>
<a> 49</a>
</li><li>
<a> 50</a>
</li><li>
<a> 51</a>
</li><li>
<a> 52</a>
</li><li>
<a> 53</a>
</li><li>
<a> 54</a>
</li><li>
<a> 55</a>
</li><li>
<a> 56</a>
</li>
</ul>
</body>
</html>Answer 1
body {
position: relative;
}
.dropdown-menu {
box-sizing: border-box;
min-width: 100% !important;
}
#new{
display: relative;
max-width: 100%;
overflow-y: auto;
max-height: 177px;
}
.dropdown-menu {
display: block;
max-height: 177px;
top: 100%;
left: 0;
z-index: 1000;
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
list-style: none;
font-size: 13px;
background-color: #ffffff;
border: 1px solid #b9b9b9;
border-radius: 0;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
background-clip: padding-box;
}
* {
box-sizing: border-box;
}
ul {
border: 1px solid red;
}
.dropdown-menu li {
position: relative;
}
ul li {
list-style-type: none;
}
ul li:hover {
background: red
}
ul li a {
white-space: pre
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="new">
<ul class="dropdown-menu" >
<li class="selected">
<a>Головное подразделение (654891238)</a>
</li>
<li>
<a> vasya</a>
</li>
<li>
<a> 1</a>
</li>
<li>
<a> 2</a>
</li>
<li>
<a> 3</a>
</li>
<li>
<a> 4</a>
</li>
<li>
<a> 5</a>
</li>
<li>
<a> 6</a>
</li>
<li>
<a> 7</a>
</li>
<li>
<a> 8</a>
</li>
<li>
<a> 9</a>
</li>
<li>
<a> 10</a>
</li>
<li>
<a> 11</a>
</li>
<li>
<a> 12</a>
</li>
<li>
<a> 13</a>
</li>
<li>
<a> 14</a>
</li>
<li>
<a> 15</a>
</li>
<li>
<a> 16</a>
</li>
<li>
<a> 17</a>
</li>
<li>
<a> 18</a>
</li>
<li>
<a> 19</a>
</li>
<li>
<a> 20</a>
</li>
<li>
<a> 21</a>
</li>
<li>
<a> 22</a>
</li>
<li>
<a> 23</a>
</li>
<li>
<a> 24</a>
</li>
<li>
<a> 25</a>
</li>
<li>
<a> 26</a>
</li>
<li>
<a> 27</a>
</li>
<li>
<a> 28</a>
</li>
<li>
<a> 29</a>
</li>
<li>
<a> 30</a>
</li>
<li>
<a> 31</a>
</li>
<li>
<a> 32</a>
</li>
<li>
<a> 33</a>
</li>
<li>
<a> 34</a>
</li>
<li>
<a> 35</a>
</li>
<li>
<a> 36</a>
</li>
<li>
<a> 37</a>
</li>
<li>
<a> 38</a>
</li>
<li>
<a> 39</a>
</li>
<li>
<a> 40</a>
</li>
<li>
<a> 41</a>
</li>
<li>
<a> 42</a>
</li>
<li>
<a> 43</a>
</li>
<li>
<a> 44</a>
</li>
<li>
<a> 45</a>
</li>
<li>
<a> 46</a>
</li>
<li>
<a> 47</a>
</li>
<li>
<a> 48</a>
</li>
<li>
<a> 49</a>
</li>
<li>
<a> 50</a>
</li>
<li>
<a> 51</a>
</li>
<li>
<a> 52</a>
</li>
<li>
<a> 53</a>
</li>
<li>
<a> 54</a>
</li>
<li>
<a> 55</a>
</li>
<li>
<a> 56</a>
</li>
</ul>
</div>
</body>
</html
Answer 2
Сделайте ul li a блочным элементом display:block;
-
13:29
Кофе для программистов: как напиток влияет на продуктивность кодеров?
-
22:13
Рекламные вывески: как привлечь внимание и увеличить продажи
-
19:13
-
16:04
Стратегії та тренди в SMM - Технології, що формують майбутнє сьогодні
-
17:27
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
-
22:17
-
18:08
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
-
18:54
-
17:35
ТОП-10
- Почему SERVER_ADDR имеет не тот IP 47926 visits
- Как заменить $_SERVER[REMOTE_ADDR] на IP клиента в PHP за двумя Nginx? 30568 visits
- Хочу вывести несколько строк из массива в один div, выводит только много undefined; подскажите, что делать? 23908 visits
- Как через css изменить цвет png изображения? 10405 visits
- Blob video url download 10006 visits
- Php curl запрос через прокси с авторизацией 9280 visits
- Работа с captcha vk api 8149 visits
© "hostciti.net" 29.3.2025 | 12:36