Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1037
  • Last Modified:

Jquery UI menu fix the hover style

on this page i m using jquery UI menu control (http://jqueryui.com/menu/) and the stylesheet i.e  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> I have altered some styles locally like background color etc,  When I hover over the menu items only then i see the items which have sub items like product and news. How can we display the arrows on items which have sub menu or if the arrow color & background color is the same then how can I edit the arrow image?
0
mmalik15
Asked:
mmalik15
1 Solution
 
GaryCommented:
When you download the jquery ui file it has all the images etc in it. Plus you should not be linking to jquery's own css file.
0
 
mcnuteCommented:
Apply the arrow image only to menu items who have children by detecting the class.
And remove the arrow image from the general style of your .graphit accordion a. like so:

This CSS directives are in your graphite.css file.

.graphite .accordion a {
padding: 5px 5px 5px 25px;
background: #009b84 url(images/bg_black.png) repeat-x 0 -1px;
text-decoration: none;
display: block;
color: white;
position: relative;
left: 25px;
}

.graphit accordion a.dcjq-parent {
background: url(images/arrow_black_right.png) no-repeat 0 center;
}

Open in new window

0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Tackle projects and never again get stuck behind a technical roadblock.
Join Now