There is a list.

When you hover on the elements of the list selection occurs:

hover

But if you scroll to the right, you get this situation:

situation

those. the element is not stretched to its full width.

How to make the element stretch the entire width of ul and the selection was until the end of the scroll?

 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>

    2 answers 2

     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

      Make ul li a block display element: block;