Ber
|
Hello, I have been looking into this for a couple of days and it doesn't seem to work so far.
I want to make the main menu (user3 position) drop down items to appear in a fade-in style and disappear in fade-out using the following css code (no Jquery involved):
div > ul {
. . .
visibility:hidden;
opacity:0;
transition:visibility 0s linear 0.5s,opacity 0.5s linear;
}
div:hover > ul {
visibility:visible;
opacity:1;
transition-delay:0s;
}
(more of this CSS tutorial can be found here: http://www.greywyvern.com/?post=337
I am trying to add the animation lines into my child items in my main CSS stylesheet:
somewhere between this lines:
/* begin MenuSubItem */
.art-hmenu ul a
{
display: block;
white-space: nowrap;
height: 24px;
background-image: url('../images/subitem.png');
background-position: left top;
background-repeat: repeat-x;
border-width: 1px;
border-style: solid;
border-top-width: 0;
border-color: #A6A6A6;
min-width: 7em;
text-align: left;
text-decoration: none;
line-height: 24px;
color: #666666;
font-family: Calibri,Arial, Helvetica, Sans-Serif;
font-size: 13px;
margin:0;
padding: 0 22px;
}
.art-hmenu ul>li:first-child>a
{
border-top-width: 1px;
}
.art-hmenu ul a:link, .art-hmenu ul a:visited, .art-hmenu ul a:hover, .art-hmenu ul a:active
{
text-align: left;
text-decoration: none;
line-height: 24px;
color: #666666;
font-family: Calibri,Arial, Helvetica, Sans-Serif;
font-size: 13px;
margin:0;
padding: 0 22px;
}
.art-hmenu ul li a:hover
{
color: #4E4E50;
background-position: left bottom;
border-color: #666666;
border-top-width: 1px !important;
}
.art-hmenu ul li a.art-hmenu-before-hovered
{
border-bottom-width: 0 !important;
}
.art-hmenu ul li:hover>a
{
color: #4E4E50;
background-position: left bottom;
border-color: #666666;
border-top-width: 1px !important;
}
/* end MenuSubItem */
I tried several times with no results, sometimes the subitems would just disappear totally or sometimes they would appear completely out of place, maybe I am placing the code in the wrong places... if this effect is not possible without Jquery scripts... does anyone how can I implement them on the website? can anyone help me with this small issue?
thanks!!!
Ber
|