<div id="fixed">
  <ul>
    <li>
      <p>1</p>
      <div class="over">はみだすエリア1</div>
    </li>
    <li>
      <p>2</p>
      <div class="over">はみだすエリア2</div>
    </li>
    <li>
      <p>3</p>
      <div class="over">はみだすエリア3</div>
    </li>
    <li>
      <p>4</p>
      <div class="over">はみだすエリア4</div>
    </li>
    <li>
      <p>5</p>
      <div class="over">はみだすエリア5</div>
    </li>
    <li>
      <p>6</p>
      <div class="over">はみだすエリア6</div>
    </li>
    <li>
      <p>7</p>
      <div class="over">はみだすエリア7</div>
    </li>
    <li>
      <p>8</p>
      <div class="over">はみだすエリア8</div>
    </li>
    <li>
      <p>9</p>
      <div class="over">はみだすエリア9</div>
    </li>
    <li>
      <p>10</p>
      <div class="over">はみだすエリア10</div>
    </li>
    <li>
      <p>11</p>
      <div class="over">はみだすエリア11</div>
    </li>
    <li>
      <p>12</p>
      <div class="over">はみだすエリア12</div>
    </li>
    <li>
      <p>13</p>
      <div class="over">はみだすエリア13</div>
    </li>
    <li>
      <p>14</p>
      <div class="over">はみだすエリア14</div>
    </li>
    <li>
      <p>15</p>
      <div class="over">はみだすエリア15</div>
    </li>
    <li>
      <p>16</p>
      <div class="over">はみだすエリア16</div>
    </li>
    <li>
      <p>17</p>
      <div class="over">はみだすエリア17</div>
    </li>
    <li>
      <p>18</p>
      <div class="over">はみだすエリア18</div>
    </li>
    <li>
      <p>19</p>
      <div class="over">はみだすエリア19</div>
    </li>
    <li>
      <p>20</p>
      <div class="over">はみだすエリア20</div>
    </li>
    <li>
      <p>21</p>
      <div class="over">はみだすエリア21</div>
    </li>
    <li>
      <p>22</p>
      <div class="over">はみだすエリア22</div>
    </li>
    <li>
      <p>23</p>
      <div class="over">はみだすエリア23</div>
    </li>
    <li>
      <p>24</p>
      <div class="over">はみだすエリア24</div>
    </li>
    <li>
      <p>25</p>
      <div class="over">はみだすエリア25</div>
    </li>
    <li>
      <p>26</p>
      <div class="over">はみだすエリア26</div>
    </li>
    <li>
      <p>27</p>
      <div class="over">はみだすエリア27</div>
    </li>
    <li>
      <p>28</p>
      <div class="over">はみだすエリア28</div>
    </li>
    <li>
      <p>29</p>
      <div class="over">はみだすエリア29</div>
    </li>
    <li>
      <p>30</p>
      <div class="over">はみだすエリア30</div>
    </li>
    <li>
      <p>31</p>
      <div class="over">はみだすエリア31</div>
    </li>
    <li>
      <p>32</p>
      <div class="over">はみだすエリア32</div>
    </li>
    <li>
      <p>33</p>
      <div class="over">はみだすエリア33</div>
    </li>
    <li>
      <p>34</p>
      <div class="over">はみだすエリア34</div>
    </li>
    <li>
      <p>35</p>
      <div class="over">はみだすエリア35</div>
    </li>
    <li>
      <p>36</p>
      <div class="over">はみだすエリア36</div>
    </li>
    <li>
      <p>37</p>
      <div class="over">はみだすエリア37</div>
    </li>
    <li>
      <p>38</p>
      <div class="over">はみだすエリア38</div>
    </li>
    <li>
      <p>39</p>
      <div class="over">はみだすエリア39</div>
    </li>
    <li>
      <p>40</p>
      <div class="over">はみだすエリア40</div>
    </li>
    <li>
      <p>41</p>
      <div class="over">はみだすエリア41</div>
    </li>
    <li>
      <p>42</p>
      <div class="over">はみだすエリア42</div>
    </li>
    <li>
      <p>43</p>
      <div class="over">はみだすエリア43</div>
    </li>
    <li>
      <p>44</p>
      <div class="over">はみだすエリア44</div>
    </li>
    <li>
      <p>45</p>
      <div class="over">はみだすエリア45</div>
    </li>
    <li>
      <p>46</p>
      <div class="over">はみだすエリア46</div>
    </li>
    <li>
      <p>47</p>
      <div class="over">はみだすエリア47</div>
    </li>
    <li>
      <p>48</p>
      <div class="over">はみだすエリア48</div>
    </li>
    <li>
      <p>49</p>
      <div class="over">はみだすエリア49</div>
    </li>
    <li>
      <p>50</p>
      <div class="over">はみだすエリア50</div>
    </li>
    <li>
      <p>51</p>
      <div class="over">はみだすエリア51</div>
    </li>
    <li>
      <p>52</p>
      <div class="over">はみだすエリア52</div>
    </li>
    <li>
      <p>53</p>
      <div class="over">はみだすエリア53</div>
    </li>
    <li>
      <p>54</p>
      <div class="over">はみだすエリア54</div>
    </li>
    <li>
      <p>55</p>
      <div class="over">はみだすエリア55</div>
    </li>
    <li>
      <p>56</p>
      <div class="over">はみだすエリア56</div>
    </li>
    <li>
      <p>57</p>
      <div class="over">はみだすエリア57</div>
    </li>
    <li>
      <p>58</p>
      <div class="over">はみだすエリア58</div>
    </li>
    <li>
      <p>59</p>
      <div class="over">はみだすエリア59</div>
    </li>
    <li>
      <p>60</p>
      <div class="over">はみだすエリア60</div>
    </li>
    <li>
      <p>61</p>
      <div class="over">はみだすエリア61</div>
    </li>
    <li>
      <p>62</p>
      <div class="over">はみだすエリア62</div>
    </li>
    <li>
      <p>63</p>
      <div class="over">はみだすエリア63</div>
    </li>
    <li>
      <p>64</p>
      <div class="over">はみだすエリア64</div>
    </li>
    <li>
      <p>65</p>
      <div class="over">はみだすエリア65</div>
    </li>
    <li>
      <p>66</p>
      <div class="over">はみだすエリア66</div>
    </li>
    <li>
      <p>67</p>
      <div class="over">はみだすエリア67</div>
    </li>
    <li>
      <p>68</p>
      <div class="over">はみだすエリア68</div>
    </li>
    <li>
      <p>69</p>
      <div class="over">はみだすエリア69</div>
    </li>
    <li>
      <p>70</p>
      <div class="over">はみだすエリア70</div>
    </li>
    <li>
      <p>71</p>
      <div class="over">はみだすエリア71</div>
    </li>
    <li>
      <p>72</p>
      <div class="over">はみだすエリア72</div>
    </li>
    <li>
      <p>73</p>
      <div class="over">はみだすエリア73</div>
    </li>
    <li>
      <p>74</p>
      <div class="over">はみだすエリア74</div>
    </li>
    <li>
      <p>75</p>
      <div class="over">はみだすエリア75</div>
    </li>
    <li>
      <p>76</p>
      <div class="over">はみだすエリア76</div>
    </li>
    <li>
      <p>77</p>
      <div class="over">はみだすエリア77</div>
    </li>
    <li>
      <p>78</p>
      <div class="over">はみだすエリア78</div>
    </li>
    <li>
      <p>79</p>
      <div class="over">はみだすエリア79</div>
    </li>
    <li>
      <p>80</p>
      <div class="over">はみだすエリア80</div>
    </li>
    <li>
      <p>81</p>
      <div class="over">はみだすエリア81</div>
    </li>
    <li>
      <p>82</p>
      <div class="over">はみだすエリア82</div>
    </li>
    <li>
      <p>83</p>
      <div class="over">はみだすエリア83</div>
    </li>
    <li>
      <p>84</p>
      <div class="over">はみだすエリア84</div>
    </li>
    <li>
      <p>85</p>
      <div class="over">はみだすエリア85</div>
    </li>
    <li>
      <p>86</p>
      <div class="over">はみだすエリア86</div>
    </li>
    <li>
      <p>87</p>
      <div class="over">はみだすエリア87</div>
    </li>
    <li>
      <p>88</p>
      <div class="over">はみだすエリア88</div>
    </li>
    <li>
      <p>89</p>
      <div class="over">はみだすエリア89</div>
    </li>
    <li>
      <p>90</p>
      <div class="over">はみだすエリア90</div>
    </li>
    <li>
      <p>91</p>
      <div class="over">はみだすエリア91</div>
    </li>
    <li>
      <p>92</p>
      <div class="over">はみだすエリア92</div>
    </li>
    <li>
      <p>93</p>
      <div class="over">はみだすエリア93</div>
    </li>
    <li>
      <p>94</p>
      <div class="over">はみだすエリア94</div>
    </li>
    <li>
      <p>95</p>
      <div class="over">はみだすエリア95</div>
    </li>
    <li>
      <p>96</p>
      <div class="over">はみだすエリア96</div>
    </li>
    <li>
      <p>97</p>
      <div class="over">はみだすエリア97</div>
    </li>
    <li>
      <p>98</p>
      <div class="over">はみだすエリア98</div>
    </li>
    <li>
      <p>99</p>
      <div class="over">はみだすエリア99</div>
    </li>
    <li>
      <p>100</p>
      <div class="over">はみだすエリア100</div>
    </li>
  </ul>
</div>
#fixed {
  width: 200px;
  position: fixed;
  top: 0;
  bottom: 0;
  background: #eee;
}

#fixed ul {
  width: 200px;
  position: absolute;
  top: 0;
  bottom: 0;
  overflow-x: visible;
  overflow-y: scroll;
}

#fixed li {
  padding: 1em;
  text-align: center;
}

#fixed li:nth-child(odd) {
  background: #ddd;
}

#fixed li:hover {
  background: yellow;
}

#fixed .over {
  width: 160px;
  padding: 1em;
  text-align: center;
  background: #aaa;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 200px;
  display: none;
}

#fixed li:hover .over {
  display: block;
}
Rerun