1 reply [Last post]
twikko
twikko's picture
Offline
newbie
Last seen: 5 years 30 weeks ago
Timezone: GMT+2
Joined: 2014-09-03
Posts: 1
Points: 2

Ok so ive got as far as making the list work and half look how I want it to, my problem is i cant seem to change the colour of the hyperlinked text from blue to black and also I dont want the hyperlinked text underlined.

Here is my full code so far...

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.-->
<script>var __adobewebfontsappname__="dreamweaver"</script>
<script src="http://use.edgefonts.net/alex-brush:n4:default;leckerli-one:n4:default.js" type="text/javascript"></script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
 
<script>
function prepareList() {
  $('#expList').find('li:has(ul)')
  	.click( function(event) {
  		if (this == event.target) {
  			$(this).toggleClass('expanded');
  			$(this).children('ul').toggle('medium');
  		}
  		return false;
  	})
  	.addClass('collapsed')
  	.children('ul').hide();
  };
 
  $(document).ready( function() {
      prepareList();
  }); </script>
<style type="text/css"> 
#listContainer{
	margin-top: 15px;
	font-family: leckerli-one;
	font-style: normal;
	font-weight: 400;
	font-size:25px;
	color:#000000;
 
 
}
 
#expList ul, li {
    list-style: none;
    margin:0;
    padding:0;
    cursor: pointer;
	color:#000000;
}
#expList p {
    margin:0;
    display:block;
	color:#000000;
}
#expList p:hover {
    background-color:#91E898;
	color:#000000;
}
#expList li {
    line-height:140%;
    text-indent:0px;
    background-position: 1px 8px;
    padding-left: 20px;
    background-repeat: no-repeat;
	color:#000000;
}
 
/* Collapsed state for list element */
#expList .collapsed {
    background-image: url(../img/collapsed.png);
}
/* Expanded state for list element
/* NOTE: This class must be located UNDER the collapsed one */
#expList .expanded {
    background-image: url(../img/expanded.png);
}
 
</style>
 
 
</head>
 
<body>
<div id="listContainer">
  <ul id="expList">
    <li>Style     
 <ul>
        <li><a href="#">1</a></li>
          <ul>
            <li>
            </li>
          </ul>
        </li>
        <li><a href="#">2</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">8</a></li>
        <li><a href="#">12</a></li>
        <li><a href="#">24</a></li>
        <li><a href="#">28</a></li>
          <ul>
            <li>
            </li>
          </ul>
        </li>
      </ul>
    </li>
    <li>Length
    <ul>
    <li><a href="#">B</a>
    <li><a href="#">B2</a>
    <li><a href="#">B3</a>
    </li>
    <li>
    </li>
    </li>
    </li>
    </ul>
    <li>Weight
      <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a>
          <ul>
            <li>
 
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
 
</div>
 
</body>
</html>

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 day 2 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

Hi twikko, Try#expList li {

Hi twikko,
Try

#expList li { a{
 color:#000;
 text-decoration:none;
}