Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Jquery UI menu fix the hover style

Posted on 2013-05-31
2
Medium Priority
?
1,013 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
[X]
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
2 Comments
 
LVL 58

Accepted Solution

by:
Gary earned 2000 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

Understanding Linux Permissions

Linux for beginners: How to view the permissions associated with files and directories and also how you can change them.

Question has a verified solution.

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

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
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…

670 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