JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML>
<html lang="en-US">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <ul class="list">
            <li>Пункт 1</li>
            <li>Пункт 2</li>
            <li>Пункт 3</li>
            <li id="expand">Пункт 4</li>
            <li>Пункт 5</li>
        </ul>
    </body>
</html>

CSS

body {
    background: url(http://gallery.nen.gov.uk/assets/0801/0000/0312/bridge.jpg);
    color: #fff;
    font-weight: bold;
}

.list {
    width: 200px;
}

#expand {
    position: relative;   
}

#inner {
    position: absolute;
    left: 100px;
    top: 0;
    display: none; 
    background: url(http://gallery.nen.gov.uk/assets/0801/0000/0312/bridge.jpg);
    border: 2px solid #fff;
}

#expand:hover > #inner {
    display: block;
    
}

JavaScript

var n = prompt('Сколько нужно пунктов?', 5),
    expand = $('#expand')
    inner = $('<ul id="inner"></ul>');
n = parseInt(n);
inner.appendTo(expand);
for (var i = 0; i < n; i++) {
    $('<li>Пункт' + (i + 1) + '</li>').appendTo(inner);
}

$('#expand').mouseover(function() {
    var pos = $('#inner').offset(),
        top = pos.top + 2,
        left = pos.left +2;
    $('#inner').css({
        'background-position' : -left + 'px  ' + -top + 'px'
    })
});