• Locked
2 replies [Last post]
Tue, 2012-07-31 12:05
serafina
serafina's picture
Offline
newbie
uk
Last seen: 10 years 43 weeks ago
uk
Timezone: GMT+1
Joined: 2006-06-28
Posts: 8
Points: 6

I have a menu that has sublevels

I want my active page link to stand out but I am not sure how to target it.

website is here sample working website

I know that there are levels of ul & li's and have successfully targetted the sub level lists with using name of menu system & ul ul and also li li

But its the top level active links I want to target - here is a short example of code 

<div class-"sf-blue">
<ul>
	<li><a href="/Home/"> &nbsp; Home&nbsp;|</a></li>
    <li><a href="/house/"> The House &amp; Area</a></li>
	<li><a href="../B&amp;B-the-dell-page.html"> Bed &amp; Breakfast|</a>
		<ul>
			<li><a href="/Home/">Bed &amp; Breakfast</a></li>
			<li><a href="#">Your B&amp;B Stay</a></li>
			<li><a href="#">Guest Bedrooms</a></li>
			<li><a href="#">Reviews from Guests</a></li>
            <li><a href="#">Tarriff B&amp;B</a></li>
            <li><a href="#">Booking B&amp;B</a></li>
		</ul>
	</li>
 
	<li><a href="../SC-the-dell-page.html">&nbsp;Self Catering&nbsp;|</a>
		<ul>
			<li><a href="#">Self Catering</a></li>
			<li><a href="#">The Coach House</a></li>
			<li><a href="#">The Old Nursery Apt</a></li>
			<li><a href="#">The Butler&acute;s Apt</a></li>
			<li><a href="#">Tariff S/C</a></li>
            <li><a href="#">Booking S/C</a></li>
		</ul>
	</li>
    <li><a href="/contact1/">Online Enquiry Form</a></li>
    <li><a href="../The-Dell-House-Directions.html">Directions</a></li>
    <li><a href="../Dell-House-Newsletters.html">Offers &amp; Newsletter</a></li>
    <li><a href="http://www.malvernwx.co.uk/index.htm" target="_blank">Weather</a></li>
    <li><a href="/blog/">BLOG</a></li>
 
</ul>  
 
</div>

and here is my css code 

.sf-blue ul {/*this is background of main menu  */
	float: left;
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
	z-index: 9;}
 
.sf-blue ul ul {/*this is background of sub menu drop down */
	background:#15406C; /*added bg color matches header blu*/
	top: 15px;/*this makes menu drop away from link */
	position: absolute;
	left: -999em;
	width: 150px;
	margin: 0;
	padding: 2px 0 2px 0;
	line-height:15px;
	border:none;
.sf-blue li li {
	float: left;
	padding: 2px 0 2px 0px;
	width: 150px;
	color:#FFF;
	background-color:#15406C; /*this is submenu listing*dark blue*/
}
 
.sf-blue a,	/* links   */
.sf-blue a:visited{
	font-size:100%;
	font-weight: bold;
	float: left;
	color:#006;
	text-decoration: none;
	display: block;
	/*height: 26px;*/
	line-height: 15px;
	padding: 0 15px;
	overflow: hidden;} 
 
.sf-blue a:hover {	
	font-weight: bold;
	float: left;
	color:red;/*not doing anything */
	text-decoration: none;
	display: block;
	/*height: 26px;*/
	line-height: 15px;
	padding: 0 15px;
	overflow: hidden;
}
.sf-blue a:active {
	font-weight: bold;
	float: left;
	color:red;/*not doing anything */
	text-decoration: none;
	display: block;
	height: 15px;
	line-height: 15px;
	padding: 0 15px;
	overflow: hidden;
}
}

Perhaps I have too much going on. Do I need to style the li and the ul ?? I notice the background works better for the ul & color better for the li. So far links on submenu come up dark blue with white text that is fine. Links on top menu are dark blu as required but can't get active link to change color or work out where colour of hover for any of the links comes from

p.ss this is style code from a dropdown menu online by By Patrick Griffiths and Dan Webb called suckerfish. Their own contact info no longer exists so I cant contact them

Top
Tags:
Tue, 2012-07-31 12:13
#1
serafina
serafina's picture
Offline
newbie
uk
Last seen: 10 years 43 weeks ago
uk
Timezone: GMT+1
Joined: 2006-06-28
Posts: 8
Points: 6

more info

I have realised that a:active is the link when you click on it so maybe there is another way of targeting the active or current page.

BTW I am using wordpress

Top
Tue, 2012-07-31 20:29
#2
Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 3 weeks 1 day ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

Hi serafina, Wordpress is

Hi serafina,
Wordpress is putting a class on the LI "selected" which you can use to target.
Something like:

.sf-blue a,	/* links   */
.sf-blue a:visited{
	font-size:100%;
	font-weight: bold;
	float: left;
	color:#006;
	text-decoration: none;
	display: block;
	/*height: 26px;*/
	line-height: 15px;
	padding: 0 15px;
	overflow: hidden;
} 
.sf-blue .selected a {
	color:red;
}
.sf-blue a:hover {	
	color:red;/*not doing anything */
}
.sf-blue a:active {
	color:red;/*not doing anything */
}

You should validate your css as you have an extra } that may just be from a typo.

Top
  • Locked