6 replies [Last post]
nfhopmike
nfhopmike's picture
Offline
newbie
Last seen: 10 years 9 weeks ago
Timezone: GMT+1
Joined: 2011-07-17
Posts: 3
Points: 4

I want to put an arrow icon at the right hand side of a menu for pages that have submenus. I have tried adding a class to the a and li elements but no go. Can anyone point me in the right direction?

<div class="wrap">
 
<div class="blue demo-container">
 
<ul class="accordion"  id="accordion-6">
    <li><a href="#">Home</a>
	</li>
    <div class="arrow">
    <li><a href="#">About us</a>
    </div>
    		<ul>
            	<li><a href="#">The Lodge</a></li>
                <li><a href="#">Ethos</a></li>
                <li><a href="#">General information</a></li>
            </ul>
    </li>
    <li><a href="#">Day Service</a>
            <ul>
            	<li><a href="#">Horticulture</a></li>
              	<li><a href="#">Wood workshop</a></li>
                <li><a href="#">Catering</a></li>
                <li><a href="#">Pottery & Art</a></li>
                <li><a href="#">Music & Drama</a></li>
                <li><a href="#">Literacy/Numeracy/IT</a></li>
                <li><a href="#">Work experience</a></li>
                <li><a href="#">Leisure</a></li>
            </ul>
    </li>
    	<li><a href="#">Home Services</a>
            <ul>
                <li><a href="#">Residential</a></li>
                <li><a href="#">Supported Living</a></li>
            </ul>
         </li>
    <li><a href="#">Student Vacancies</a></li>
    <li><a href="#">Conference facilities</a></li>
	<li><a href="#">News & Events</a></li>
    <li><a href="#">Donate</a></li>
    <li><a href="#">Contact us</a></li>
 	<li><a href="#">Links</a></li>
 
</ul>
</div>
</div>

AndyA
AndyA's picture
Offline
Moderator
Brisbane
Last seen: 10 years 9 hours ago
Brisbane
Timezone: GMT+10
Joined: 2011-06-30
Posts: 39
Points: 41

Hey nfhopmike Try placing the

Hey nfhopmike

Try placing the arrow class on the "li" and remove the "divs"
then add your arrow as a background-image.

nfhopmike
nfhopmike's picture
Offline
newbie
Last seen: 10 years 9 weeks ago
Timezone: GMT+1
Joined: 2011-07-17
Posts: 3
Points: 4

Still not working - I've

Still not working - I've taken off the divs and added a class to the li element. Here's the css

body,html,div,blockquote,img,label,p,h1,h2,h3,h4,h5,h6,pre,ul,ol,li,dl,dt,dd,form,a,fieldset,input,th,td{border:0;outline:none;margin:0;padding:0;}
ul, ul li{list-style: none;}
ul.text {margin-bottom: 1em; line-height: 1.5em;}
.text-center {text-align: center;}
body {font: normal 13px Arial, sans-serif;}
h2 {font: normal 26px Arial, sans-serif; padding: 20px 0; margin: 0 0 30px 0;}
.wrap {width: 960px; margin: 0 auto;}
.demo-container {padding: 20px; float: left; width: 200px;}
.demo-container h4 {font-size: 14px; margin: 0 0 5px 0;}
.clear {clear: both;}
 
.dcjq-count {float: right;}
 
.blue .accordion	{ 
	border-top: 1px solid #013d6c; 
	border-right: 1px solid #013d6c; 
	border-left: 1px solid #013d6c;
}
 
.blue .accordion, .blue .accordion li {
	margin: 0; 
	padding: 0; 
	border: none;
}
 
.blue .accordion a {
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	padding: 10px 10px 10px 15px;
	background-image:url(../images/menugrad1.jpg);
	text-decoration:none;
	display: block;
	color: #fff;
	border-bottom: 1px solid #157622;
	border-top: 1px solid #64d975;
	font-weight:bold
}
 
.blue .accordion ul a {
	padding: 10px 10px 10px 25px;
	background-color:#3C3;
}
 
.blue .accordion a.dcjq-parent, .blue .accordion a.dcjq-parent:hover {
	padding: 10px 10px 10px 15px;
 
}
 
.blue .accordion a.dcjq-parent.active {
	background: #069e1c;
	color:#FC0;
}
 
.blue .accordion a:hover {
	background: #057715;
	background-image:url(../images/menugrad2.jpg);
}
 
.blue .accordion a:active{
}
 
.blue .accordion li .arrow {
	background-image: url(../images/arrow.png);
	background-position: right center;
}

and the new section of html:

<ul class="accordion"  id="accordion-6">
    <li><a href="#">Home</a>
	</li>
 
    <li class="arrow"><a href="#">About us</a>
 
    		<ul>
            	<li><a href="#">Minstead Lodge</a></li>
                <li><a href="#">Ethos</a></li>
                <li><a href="#">General information</a></li>
            </ul>
    </li>

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 4 days 3 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

You have a space between the

You have a space between the tag and class:

 li .arrow 

Should be :
li.arrow
 

nfhopmike
nfhopmike's picture
Offline
newbie
Last seen: 10 years 9 weeks ago
Timezone: GMT+1
Joined: 2011-07-17
Posts: 3
Points: 4

I have removed the space in

I have removed the space in the css definition but still no arrow ahowing....

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 1 week 5 days ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2050
Points: 2282

nfhopmike wrote: I have

nfhopmike wrote:

I have removed the space in the css definition but still no arrow ahowing....

Maybe the image doesn't exist. Show a link.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 28 weeks 3 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

I'd put the image on the 'a'

I'd put the image on the 'a' element.

<!DOCTYPE html>
 
<html>
  <head>
 
    <meta http-equiv="content-type"
	  content="text/html; charset=utf-8" />
 
    <title>test doc</title>
 
    <style type="text/css">
html, body {
    margin: 0;
    padding: 0;
    }
 
body {
    background-color: #eed;
    color: black;
    font: 100%/1.25 serif;
    }
 
p {
    font-size: 1em;
    }
 
ul {
    margin-left: 1.25em;
    padding: 0;
    list-style: none;
    }
 
ul ul {
    display: none;
    margin: 0;
    padding-left: 40px;
    }
 
/* this is for demo only */
.arrow > a:after {
    content: "\a0⇩";
    }
 
/* this is the real deal */
/* .arrow > a {
    background: url(arrow.gif) right center no-repeat;
    padding-right: 24px;
    }
*/ 
 
.arrow:hover ul {
    display: block;
    }
 
    </style>
  </head>
 
  <body>
    <ul class="accordion"  id="accordion-6">
      <li><a href="#">Home</a>
      </li>
 
      <li class="arrow"><a href="#">About us</a>
     	<ul>
          <li><a href="#">Minstead Lodge</a></li>
          <li><a href="#">Ethos</a></li>
          <li><a href="#">General information</a></li>
        </ul>
      </li>
    </ul>
  </body>
</html>
IE<8 will need some tweaks, but this is a simplified demo.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.