552 posts
    Has been part of the Envato Community for over 4 years Has referred 100+ members Located in Canada Has collected 100+ items on Envato Market
+1 more
OurWebMedia says

Hello,

I seem to be having a horrible time with getting this menu to work properly. Apparently its coded to work but I cannot seem to get the “hover” mouseover function to work. I am only using one level of menus, not using a second level as I do not have need to list that much contents.

I’ve tried everything to accomplish a “mouseover” effect for when you hover over the menu text it changes. I’ve been instructed this template menu includes that and I am unable to achieve it myself and was wondering if maybe there’s something wrong in the coding. Can someone please take a peek and see if it looks ok? I can’t seem to find any errors…

Menu CSS

/** ESSENTIAL STYLES */

.sf-menu, .sf-menu * {
    margin:            0;
    padding:        0;
    list-style:        none;
      float: right;
}

.sf-menu {
    line-height:    1.0;
}

.sf-menu ul {
    position:        absolute;
    top:            -999em;
    width:            120px; /* left offset of submenus need to match (see below) */
}

.sf-menu ul li {
    width:            100%;
}

.sf-menu li:hover {
    visibility:        inherit; /* fixes IE7 'sticky bug' */
}

.sf-menu li {
    float:            left;
    position:        relative;
    width:             auto;
}

.sf-menu a {
    display:        block;
    position:        relative;
}

.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
    left:            20px;
    top:            50px; /* match top ul list item height */
    z-index:        100;
}

ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul {
    top:            -999em;
}

ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {
    left:            120px; /* match ul width */
    top:            0px!important;
}

ul.sf-menu li li:hover li ul,
ul.sf-menu li li.sfHover li ul {
    top:            -999em;
}

ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul {
    left:            120px; /* match ul width */
    top:            0px!important;
}

#menu {
    position: relative;
    top: 0px;
    right: 0px;
    z-index: 10;
}

#menu li {
    display: inline;
}

.sf-menu a, .sf-menu a:visited  {
    display: block;
    float: left;
    margin: 0 0 0 20px;
    line-height: 50px;
    color: #EFAD00!important;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: .5px;
    outline: none;
}

.sf-menu a:hover {
    color: #EFAD00;
}

.sf-menu li li a,
.sf-menu li li a:visited {
    margin: 0px!important;
    padding: 2px 10px;
    line-height: 20px;
    background: #555;
    color: #c5c5c5;
    border-bottom: 1px dotted #8a8a8a;
    font-weight: normal;
    text-transform: none;
}

.sf-menu li li a:hover {
    background: #252525;
    color: #fff;
}

Thanks for any assistance that can be given. I’d really like to have this rollover effect.

Kind regards, Bryce

42 posts
    Has been part of the Envato Community for over 4 years Has collected 1+ items on Envato Market Sells items exclusively on Envato Market Located in Indonesia
islammunity says
Hello,

I seem to be having a horrible time with getting this menu to work properly. Apparently its coded to work but I cannot seem to get the “hover” mouseover function to work. I am only using one level of menus, not using a second level as I do not have need to list that much contents.

I’ve tried everything to accomplish a “mouseover” effect for when you hover over the menu text it changes. I’ve been instructed this template menu includes that and I am unable to achieve it myself and was wondering if maybe there’s something wrong in the coding. Can someone please take a peek and see if it looks ok? I can’t seem to find any errors…

Menu CSS

/** ESSENTIAL STYLES */

.sf-menu, .sf-menu * {
    margin:            0;
    padding:        0;
    list-style:        none;
      float: right;
}

.sf-menu {
    line-height:    1.0;
}

.sf-menu ul {
    position:        absolute;
    top:            -999em;
    width:            120px; /* left offset of submenus need to match (see below) */
}

.sf-menu ul li {
    width:            100%;
}

.sf-menu li:hover {
    visibility:        inherit; /* fixes IE7 'sticky bug' */
}

.sf-menu li {
    float:            left;
    position:        relative;
    width:             auto;
}

.sf-menu a {
    display:        block;
    position:        relative;
}

.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
    left:            20px;
    top:            50px; /* match top ul list item height */
    z-index:        100;
}

ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul {
    top:            -999em;
}

ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {
    left:            120px; /* match ul width */
    top:            0px!important;
}

ul.sf-menu li li:hover li ul,
ul.sf-menu li li.sfHover li ul {
    top:            -999em;
}

ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul {
    left:            120px; /* match ul width */
    top:            0px!important;
}

#menu {
    position: relative;
    top: 0px;
    right: 0px;
    z-index: 10;
}

#menu li {
    display: inline;
}

.sf-menu a, .sf-menu a:visited  {
    display: block;
    float: left;
    margin: 0 0 0 20px;
    line-height: 50px;
    color: #EFAD00!important;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: .5px;
    outline: none;
}

.sf-menu a:hover {
    color: #EFAD00;
}

.sf-menu li li a,
.sf-menu li li a:visited {
    margin: 0px!important;
    padding: 2px 10px;
    line-height: 20px;
    background: #555;
    color: #c5c5c5;
    border-bottom: 1px dotted #8a8a8a;
    font-weight: normal;
    text-transform: none;
}

.sf-menu li li a:hover {
    background: #252525;
    color: #fff;
}

Thanks for any assistance that can be given. I’d really like to have this rollover effect.

Kind regards, Bryce

superfish js isn’t support mouse over effect, it’s just give you drop down effect, if you’d like to find how to add mouse over effect to your nav menu, you can find @: http://dynamicdrive.com/

552 posts
    Has been part of the Envato Community for over 4 years Has referred 100+ members Located in Canada Has collected 100+ items on Envato Market
+1 more
OurWebMedia says
superfish js isn’t support mouse over effect, it’s just give you drop down effect, if you’d like to find how to add mouse over effect to your nav menu, you can find @: http://dynamicdrive.com/

Hello,

Actually, it does.

I’ve discovered the problem to my own issues. A small bug inside the css and apparently I need to add in the ”!important;”...

Example:
.sf-menu a, .sf-menu a:visited  {
    display: block;
    float: left;
    margin: 0 0 0 20px;
    line-height: 50px;
    color: #ffffff!important;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: .5px;
    outline: none;
}

.sf-menu a:hover {
    color: #EFAD00!important;
}

I was just missing this part: color: #EFAD00!important;

Thanks so much for your response, I do appreciate your time.

42 posts
    Has been part of the Envato Community for over 4 years Has collected 1+ items on Envato Market Sells items exclusively on Envato Market Located in Indonesia
islammunity says

you’re welcome

by
by
by
by
by
by