Solved

CSS Style for list properties with no href

Posted on 2014-02-11
11
262 Views
Last Modified: 2014-02-12
I have set a STYLE for a collapsible/expandible lists. The highest level is just a year, no link with a +. I want an indication (other than the + sign) that there are more levels underneath. I have used the following span style to achieve the look I want, but have not been able to implement it in the STYLE section:

<span style="cursor:hand; color:#0000FF; text-decoration:underline;">

Following is the current STYLE:

<style>
ul {
    margin:3px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:10pt;
	color:Blue;
}
li {
    margin-left:10px;
}
li.category:before {
    content:"+  ";
    padding-left:5px;
}
li.item:before {
    content:"•  ";
}
.top>li>ul {
    display:none;
	a:hover	color:red
}
ul li:hover>ul {
    /*display:block;   */
}
ul, li {
    list-style:none;
}

</style>

Open in new window

0
Comment
Question by:Malloy1446
  • 4
  • 4
  • 3
11 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 39850747
What do you want instead? You can use an image

li.category:before {
content:url('showmore.jpg')
...
0
 
LVL 42

Expert Comment

by:Chris Stanyon
ID: 39851203
Why not just give the top level a class and then add this to your CSS

.someClass span { cursor:hand; color:#0000FF; text-decoration:underline; }

Open in new window

Not entirely sure I follow what you need. We might want to see the HTML this applied to along with a clearer explanation of what you're after.
0
 

Author Comment

by:Malloy1446
ID: 39851475
I want the Level 1 and Level 2 underlined and when you hover over Level 1 and Level 2, I want it to change colors. My user does not think the + sign is adequate to show that there is another level.

I am attaching my code and I hope it will illustrate better.
Code4.txt
0
 
LVL 58

Expert Comment

by:Gary
ID: 39851539
ul>li, ul>li>li {
text-decoration:underline
}
ul>li:hover, ul>li>li:hover {
color:blue
}
0
 
LVL 42

Expert Comment

by:Chris Stanyon
ID: 39851813
Hmmm. Such a simple idea yet a right bugger to implement. While looking into this I realised just what a pain in the a*** this is to do. Gary's solution should work (the ul > li bit anyway), but it just doesn't!!

The underline gets applied to everything, and you can't prevent it! Here's a fiddle to prove it (I didn't believe it until i tried):

http://jsfiddle.net/ChrisStanyon/DX636/

You're going to have to edit your HTML, wrap the elements in a span and style them.
0
Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

 
LVL 58

Expert Comment

by:Gary
ID: 39851892
You can fix it with

.menu > li:first-line, ul > li > li:first-line { text-decoration:underline}

(assuming you don't have a multi-line menu text)
0
 
LVL 42

Accepted Solution

by:
Chris Stanyon earned 500 total points
ID: 39851914
Actually, if you're going to do that, you only need:

.top > li:first-line { text-decoration:underline; }

Open in new window

(An LI can't be a child of an LI, so you'll never have ul > li > li)
0
 
LVL 58

Expert Comment

by:Gary
ID: 39851944
First and second level underlined?

.top > li:first-line,.top > li > ul > li:first-line { text-decoration: underline; }
0
 

Author Comment

by:Malloy1446
ID: 39853851
Ok, I have the underline and color, but I still need a hover option. Even though it is not a link, I want the pointer/hand as an indication to click for further options.
0
 
LVL 42

Assisted Solution

by:Chris Stanyon
Chris Stanyon earned 500 total points
ID: 39853883
If you've gone the route of the span, then you'll need something like this:

span { cursor: pointer; }
span:hover { color:red; }

Open in new window

0
 

Author Closing Comment

by:Malloy1446
ID: 39854058
Thanks for the code. I am learning!
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
This article discusses four methods for overlaying images in a container on a web page
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)

762 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now