Well, can anyone tell me how I can do this with hover ?
When hovering over the menu link it appears that vertical line over the name, I only succeeded with the horizontal line below the name.
Or tell me where I find examples, I did not find anything about it.
You can put invisible span inside each link that will only appear when the mouse passes over the link.
CSS:
body{ background: #000;}
a{ color: #fff;}
li{ padding: 0px; margin: 0px; list-style: none; display: inline-block; float: left; margin: 10px; position: relative;}
ul{ padding: 0px; margin: 0px;}
li span{
display: none; width: 1px; background: #fff; position:absolute; bottom: 100%; height: 1000px; left: 50%; margin-left: -1px;
}
li:hover span{ display: inline-block;}
HTML:
<ul>
<li>
<a href="">Link1</a>
<span></span>
</li>
<li>
<a href="">Link2</a>
<span></span>
</li>
</ul>
Fiddle: link