Solved

CSS Style for list properties with no href

Posted on 2014-02-11
11
264 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 43

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 43

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
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
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 43

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 43

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
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…

920 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

12 Experts available now in Live!

Get 1:1 Help Now