Подчеркнутое меню в CSS с выпадающим списком

Question

У меня есть this меню в качестве основы для моей веб-страницы. Но мне интересно, как я мог получить это меню с выпадающим списком. Я хочу, чтобы другие вкладки под каждой категорией меню выпадали под скользящую подчеркивание.

.container { 
width: 50%; 
margin: 0 auto; 
} 

ul li { 
display: inline; 
text-align: center; 
} 

a { 
display: inline-block; 
width: 25%; 
padding: .75rem 0; 
margin: 0; 
text-decoration: none; 
color: #000; 
} 

.two:hover ~ hr { 
margin-left: 25%; 
} 

.three:hover ~ hr { 
margin-left: 50%; 
} 

.four:hover ~ hr { 
margin-left: 75%; 
} 

hr { 
height: .25rem; 
width: 25%; 
margin: 0; 
background: #343434; 
border: none; 
transition: .3s ease; 
} 

Answer 1

Вам необходимо указать подэлементы в вашем меню. В основном, внутри вашей ли. Эта улица не является дисплей по умолчанию и при наведении на родительском Ли он будет отображать ул селектором, как это: уль Ли: парить ул {}

ul li:hover ul{ 
    display:block; 
} 

See on jsfiddle

Конечно ты будешь иметь стилизовать этот пример, но это не так.