Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

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

CSS Style for list properties with no href

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
Malloy1446
Asked:
Malloy1446
  • 4
  • 4
  • 3
2 Solutions
 
GaryCommented:
What do you want instead? You can use an image

li.category:before {
content:url('showmore.jpg')
...
0
 
Chris StanyonCommented:
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
 
Malloy1446Author Commented:
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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
GaryCommented:
ul>li, ul>li>li {
text-decoration:underline
}
ul>li:hover, ul>li>li:hover {
color:blue
}
0
 
Chris StanyonCommented:
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
 
GaryCommented:
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
 
Chris StanyonCommented:
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
 
GaryCommented:
First and second level underlined?

.top > li:first-line,.top > li > ul > li:first-line { text-decoration: underline; }
0
 
Malloy1446Author Commented:
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
 
Chris StanyonCommented:
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
 
Malloy1446Author Commented:
Thanks for the code. I am learning!
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

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