Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

CSS Style for list properties with no href

Posted on 2014-02-11
11
Medium Priority
?
290 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
[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
  • 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 44

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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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 44

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
 
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 44

Accepted Solution

by:
Chris Stanyon earned 2000 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 44

Assisted Solution

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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
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 position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
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…
Suggested Courses

598 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