Горизонтальное раскрытие «Nav Bar» не работает

Question

Я пытаюсь создать навигационную панель, которая показывает навигационные ссылки, когда пользователь наводится на элемент p.
Идея состоит в том, чтобы граница элемента p расширялась до конца страницы,
и показывала указанные навигационные ссылки.
Проблема в том, что, когда я перемещаю мышь от слова в пределах
в элементе p, граница возвращается в исходное положение.
Таким образом, по существу навигационные ссылки исчезнут, потому что их появление вызвано тем, что элемент p завис.

Так что мой вопрос: как я могу получить границы элемента p, чтобы оставаться расширенным?
, пока я иду, чтобы выбрать ссылку?

Заранее благодарим за помощь и помощь.

HTML-:

<nav> 
<p>Navigate:</p> 

<ul id="inner"> 
<li><a href="#">Home</a></li> 
<li><a id="yourcomp" href="#">Your Comp</a></li> 
<li id="spec"><a href="#">Spec Spec</a></li> 
<li><a href="#">Contact</a></li> 
</ul> 

</nav> 

CSS-

nav p { 
font-family: 'Raleway', sans-serif; 
font-size: 1.6em; 
font-weight: 100; 
color: #333333; 
padding-top: 17px; 
padding-left: 7px; 
height: 50px; 
border: 4px solid #4a4a4a; 
border-top: none; 
border-bottom: none; 
border-top-left-radius: 10px; 
border-top-right-radius: 10px; 
border-bottom-left-radius: 10px; 
border-bottom-right-radius: 10px; 
width: 60px; 
transition-property: width; 
transition-duration: 1s; 
} 

nav p:hover { 
width: 98%; 
} 

(Ради сохранения этого поста от слишком долго, я не добавлял CSS для ул и Li)

Answer 1

Почему бы вам просто не положить ul внутри p (и сделать из него div, так как p означает «пункт», который на самом деле это не так). Затем зависание над элементами списка все равно будет парить над вами контейнером, оно остается расширенным.

Чтобы скрыть список элементов, пока меню не расширено, вы можете легко применить overflow: hidden; к контейнеру, поэтому все, что не подходит, не отображается.