Menu Agenda

Oi gente, como pediram na Ask. como fazer uma agenda personalizada, achei melhor fazer um "Menu Agenda" que é mais fácil para explicar. Para esse tutorial eu usei um menu do Tumblr Single Themes e o modifiquei {já postei aqui confiram}:

Ver Resultado

1 - Coloque esse código em seu css;

.menudiv {
background: #eee; /* Cor de fundo da wishlist */
margin-bottom: 2px;
font: 12px Tahoma; /* Tamanho e fonte */
line-height: 18px;
widht: 300px;
height: 29px;
-webkit-transition-duration: .80s;
-moz-transition-duration: .80s;
-o-transition-duration: .80s;
-ms-transition-duration: .80s;
transition-duration: .80s;
overflow: hidden;
}

.menudiv:hover {
background: #b37206; /* Cor de Fundo da wishlist ao passar o mouse */
margin-left: 0px;
widht: 300px;
height: 29px;
color: #fff; /* Cor da letra da wishlist */
}

.menudiv seta {
background: #b37206; /* Fundo de onde está a seta */
font: 20px Tahoma; /* Tamanho e fonte */
color: #fff; /* Cor da Seta */
padding: 4px;
margin-right: 9px;

}

.menudiv:hover seta {
background: ; /* Cor da Caixinha da seta ao passar o mouse */
color: #513868; /* Cor da setinha ao passar o mouse */
}

2 - Coloque esse código onde quer que apareça;

<div class="menudiv"><seta>01</seta>São Paulo - Brasil</div>
<div class="menudiv"><seta>02</seta>São Paulo - Brasil</div>
<div class="menudiv"><seta>03</seta>São Paulo - Brasil</div>
<div class="menudiv"><seta>04</seta>São Paulo - Brasil</div>

Créditos : Single Themes | Sugoi Tutoriais