Então o que mais lhe chama interessa é o efeito do menu?
Para fazer o os sub-itens do menu “descer” com aquele efeito eu acho que seria preciso mudar os códigos do menu no header.php também!
Então, queria colocar esse efeito e essas bordas do retangulo que aparece quando passa o mouse sobre.
É bem parecido com esse que você criou, só mudar alguns detalhes (acho).
Sim, deixar ele igual ao que você quer é facil, o dificil é fazer o spam em wordpress pro menu descer com aquele efeitinho ali 🙁
Então deixa sem o efeito mesmo, quando colocar no ar tento fazer um com o efeito.
Então, acredito que seja isso:
/* =Menu
-------------------------------------------------------------- */
#access {
background: #FFF;
display: block;
float: left;
margin: 0 auto;
width: 940px;
margin-bottom: 3px;
margin-top: 3px;
}
#access .menu-header,
div.menu {
font-size: 13px;
margin-left: 12px;
width: 928px;
}
#access .menu-header ul,
div.menu ul {
list-style: none;
margin: 0;
}
#access .menu-header li,
div.menu li {
float: left;
position: relative;
}
#access a {
color: #333;
display: block;
line-height: 38px;
padding: 0 10px;
text-decoration: none;
}
#access ul ul {
border:medium #006;
box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
-webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
display: none;
position: absolute;
top: 38px;
left: 0;
float: left;
width: 200px;
z-index: 99999;
}
#access ul ul li {
min-width: 180px;
}
#access ul ul ul {
left: 100%;
top: 0;
}
#access ul ul {
margin-top: 6px !important;
background: #FFF;
line-height: 1em;
padding: 10px;
width: 180px;
height: auto;
-moz-border-radius: 10px; /* Para Firefox */
-webkit-border-radius: 10px; /*Para Safari e Chrome */
border-radius: 10px; /* Para Opera 10.5+*/
overflow:hidden;
border: 1px solid #ddd;
}
#access ul ul a {
background: #FFF;
line-height: 1em;
padding: 10px;
height: auto;
border-bottom: 1px solid #ddd !important;
-moz-border-radius: 0px; /* Para Firefox */
-webkit-border-radius: 0px; /*Para Safari e Chrome */
border-radius: 0px; /* Para Opera 10.5+*/
}
#access li a{
background: none;
color: #333;
border: 1px solid #fff;
-moz-border-radius: 10px; /* Para Firefox */
-webkit-border-radius: 10px; /*Para Safari e Chrome */
border-radius: 10px; /* Para Opera 10.5+*/
}
#access li a:hover {
background: #eee;
color: #333;
border: 1px solid #ddd;
-moz-border-radius: 10px; /* Para Firefox */
-webkit-border-radius: 10px; /*Para Safari e Chrome */
border-radius: 10px; /* Para Opera 10.5+*/
}
#access ul ul :hover > a {
background: #FFF;
color:#E25534;
line-height: 1em;
padding: 10px;
height: auto;
border-color:#FFF;
border-bottom: 1px solid #ddd !important;
-moz-border-radius: 0px; /* Para Firefox */
-webkit-border-radius: 0px; /*Para Safari e Chrome */
border-radius: 0px; /* Para Opera 10.5+*/
}
#access ul li:hover > ul {
display: block;
}
#access ul li.current_page_item > a,
#access ul li.current-menu-ancestor > a,
#access ul li.current-menu-item > a,
#access ul li.current-menu-parent > a {
background: #eee;
color: #333;
border: 1px solid #ddd;
-moz-border-radius: 10px; /* Para Firefox */
-webkit-border-radius: 10px; /*Para Safari e Chrome */
border-radius: 10px; /* Para Opera 10.5+*/
}
* html #access ul li.current_page_item a,
* html #access ul li.current-menu-ancestor a,
* html #access ul li.current-menu-item a,
* html #access ul li.current-menu-parent a,
* html #access ul li a:hover {
color: #333;
}
/* =Content
-------------------------------------------------------------- */
Qualquer problema ou dúvida, é só chamar!!
😀
É isso mesmo que eu preciso, obrigado pela ajuda.
