html - How to keep links visible after hovering -

i'm trying have links agentsheets, gimp, , inkscape show when link portfolio hovered. i've achieved that, whenever mouse moved portfolio, click 1 of links, disappear because portfolio isn't being hovered on anymore. have advice? thanks!

css:

#portfolio:hover + #portfolio2 {     display:block; }  #portfolio2 {     display:none; }  #portfolio {     width:70px;     display:inline; } 

html:

<div id="portfolio"><a href="portfolio.html" onclick="readcookie();">portfolio</a>div> <div id="portfolio2"> <a href="portfolio_sim.html" onclick="readcookie();">agentsheets</a> <a href="portfolio_gimp" onclick="readcookie();">gimp</a> <a href="portfolio_ink" onclick="readcookie();">inkscape</a> </div> </div> 

to have effect work portfolio2 div should inside main div

html

<div id="portfolio"><a href="portfolio.html" onclick="readcookie();">portfolio</a>      <div id="portfolio2"> <a href="portfolio_sim.html" onclick="readcookie();">agentsheets</a>  <a href="portfolio_gimp" onclick="readcookie();">gimp</a>  <a href="portfolio_ink" onclick="readcookie();">inkscape</a>      </div> </div> 

css

then css becomes

#portfolio:hover #portfolio2 {     display:block; } #portfolio2 {     display:none; } #portfolio {     display: inline-block;     border:1px solid red; } 

note: will cause parent div change in size may not need.

jsfiddle demo