Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

Jquery UI menu fix the hover style

Posted on 2013-05-31
2
941 Views
Last Modified: 2013-06-20
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
Comment
Question by:mmalik15
2 Comments
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 39210833
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
 
LVL 11

Expert Comment

by:mcnute
ID: 39225448
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

How Do You Stack Up Against Your Peers?

With today’s modern enterprise so dependent on digital infrastructures, the impact of major incidents has increased dramatically. Grab the report now to gain insight into how your organization ranks against your peers and learn best-in-class strategies to resolve incidents.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

839 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question