Возникли проблемы со скрытием переполнения списка, вложенного внутри элемента div. ⇐ Html

[Anonymous]

У меня есть неупорядоченный список, вложенный в фиолетовый элемент div. Я хочу, чтобы была видна только часть внутри (или над) div, и я хочу иметь возможность прокручивать, чтобы просмотреть остальную часть. Я уже сделал это в более раннем проекте.

http://codepen.io/tyl-er/pen/ALAyjq (введите поиск, чтобы увидеть пример)

Я попробовал использовать «overflow:hidden;» но это не работает.

Код: Выделить всё

    





[list]
[*][url=#fav]Favs[/url]
[*][url=#on]Online[/url]
[*][url=#off]Offline[/url]
[/list]



[list]
[*]streamerhouse
[*]freecodecamp
[*]OgamingSC2
[*]brunofin
[*]cretetion
[*]ESL_SC2
[*]storbeck
[*]comster404
[*]habathcx
[*]RobotCaleb
[*]noobs2ninjas
[/list]





/*Colors
#6441A4 (navbar, footer, highlight)
#392E5C
#17141F(background)*/
* {
color: white
}

body {
height: 100%;
width: 100%;
background: #17141f;
}

.box {
height: 80%;
width: 360px;
background: #392E5C;
position: absolute;
margin-left: auto;
margin-right: auto;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}

.nav ul {
width: 360px;
margin: 0;
padding: 0;
background: #6441A4;
}
.nav li {
font-family: 'Oswald', sans-serif;
font-size: 1.2em;
line-height: 40px;
height: 40px;
border-bottom: 1px solid #888;
text-align: center;
}

.nav a {
text-decoration: none;
color: #fff;
display: block;
transition: .5s background-color;
}

.nav a:hover {
background-color: #005f5f;
}

.nav a.active {
background-color: #fff;
color: #444;
cursor: default;
}

@media screen and (min-width: 600px) {
.nav li {
width: 120px;
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 1.4em;
}

/* Option 1 - Display Inline */
.nav li {
display: inline-block;
margin-right: -4px;
}

a {
color: white;
}
a:hover {
color: white;
}

.list ul {
padding: 8px;
overflow: hidden;
overflow-y: scroll;
position: relative;
background:
}

.list li {
width: 360px;
height: 50px;

}

Вот URL-адрес проекта
http://codepen.io/tyl-er/pen/NRPkaV?editors=1100

Подробнее здесь: https://stackoverflow.com/questions/393 ... side-a-div