I've been doing this kind of design, but how to make a transition to a hover anchor.

[Alberto]

I've seen a lot of this menu online, of course I did, but...

1. How to remove the name from the address line ID
2. How to make a transition to anchors hover
3. How to cut the other blocks as well. первый

Example in sand: http://codepen.io/Geyan/pen/mELRKr?editors=110

*{
  margin:0;
  padding:0;
  list-style:none;
  text-decoration:none;
}
menu{
  height:50px;
  background:#fff;
  line-height:47px;
}
ul li{
  display:inline-block;
  padding:.1em 1em;
  background:#fff;
  position:relative;
  outline:1px solid #eee;
}
ul>li>a{
  color:blue;
}
.l:after{
  content:"";
  border:5px solid transparent;
  border-top:5px solid blue;
  position:absolute;
  right:2px; top:48%;
}
.l .menu{
  position:absolute;
  top:51px; left:0;
  width:600px;
  height:300px;
  background:#fff;
  border:10px solid #fff;
  outline:1px solid #eee;
  display:none;
}
.l:hover .menu{
  display:block;
}
.tab{
  overflow:hidden;
  width:100%;
  height:100%;
  background:#fff;
}
.paginator,.content{
  float:left;
  height:100%;
}
.paginator{
  width:30%;
  background:#fff;
}
.content{
  width:70%;
  background:#fff;
  position:relative;
}
.view{
  width:95%;
  height:95%;
  outline:1px solid #eee;
  margin:1px 2%;
  overflow:hidden;
}
.paginator p{
  border:1px solid #eee;
  margin:0 0 3px 0;
  padding-left:4px;
}
.paginator p:focus,
.paginator p:hover{
  background:#eee;
}
.paginator p a{
  display:block;
  width:100%;
  height:100%;
  color:blue;
}
.view div{

width:90%;

height:90%;

margin:10px auto 30px;

}

.p1{

background:#ccc;

}

.p2{

background:#000;

}

.p3{

background:#cc0000;

}

.p4{

background:#30dd30;

}

<menu>

<ul>

<li><a href="">Главная</a></li>

<li><a href="">Гостевая</a></li>

<li class="l"><a href="">Примеры</a>

<div class="menu">

<div class="tab">

<div class="paginator">

<p><a href="#d">Изображения</a></p>

<p><a href="#c">Смайлы</a></p>

<p><a href="#b">Книги</a></p>

<p><a href="#a">Кино</a></p>

</div>

<div class="content">

<div class="view">

<div id="d"class="p1"></div>

<div id="c" class="p2"></div>

<div id="b" class="p3"></div>

<div id="a" class="p4"></div>

</div>

</div>

</div>

</div>

</li>

<li><a href="">О нас</a></li>

</ul>

</menu>

I naturally understand that there are no real crossings to anchor. id="?" to do so hover ♪ css but I don't know how to do that. js, plug like this, especially first paragraph and Second ?

[tahishae]

Why do you need an anchor in principle? You need a li:hover + div. In the div, put what you want. This is an example:

li {
  padding: 1em 2em;
  border: 1px solid #ddd;
  display: inline-block;
  background-color: #fff;
}
ul li ul li {

display: none;

}
ul li:hover ul li {

display: inline-block;

}
#withsub {

position: relative;

}
#withsub ul {

position: absolute;

}
#withsub li {

position: relative;

}
#withsub li + div {

position: absolute;

left: 100%;

top: 0;

}
li:hover + div {

width: 400px;

height: 300px;

border: 1px solid #ddd;

}

<ul>

<li>item#1</li>

<li>item#2</li>

<li id="withsub">item#3 &or;

<ul>

<li>subitem#1</li>

<div style="background-color: #d00;"></div>

<li>subitem#2</li>

<div style="background-color: #0d0;"></div>

<li>subitem#3</li>

<div style="background-color: #00d;"></div>

<li>subitem#4</li>

<div style="background-color: #dd0;"></div>

</ul>

</li>

<li>item#4</li>

</ul>