Solved

CSS Style for list properties with no href

Posted on 2014-02-11
11
275 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 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
Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

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

Monthly Recap

May was a big month for new releases from Linux Academy! Take a look at what our team built recently in our blog. You can access the newest releases from our blog.

Question has a verified solution.

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

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

726 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