Hey guys,

 

I'm struggling to make a button link (sounds crazy) Heres my code:

 

<ul id="nav" class="dropdown">
<a href="#"><li class="home-btn"></li></a>
<li class="about-btn">
	<ul>
		<li><a href="#">Company Profile</a></li>
		<li><a href="#">Ethos</a></li>
		<li><a href="#">Our People</a></li>
		<li><a href="#">Benefits of working with us</a></li>
		<li><a href="#">Join us</a></li>
	</ul>

</li>

 

 

The "Home" Button works fine, and the "About" has a drop down with company profile etc as sub items. But I need to make the actual top "About" button link? Am I missing something really stupid here?

 

I've tried <a href="#"><li class="about-btn"></a> But that doesn't work, presumably because the </li> isnt inside the </a>.

 

Any ideas?

 

Thanks,

Chris

Edited February 10, 201214 yr by Renaissance-Design
Please use the code button or tags to format your code.

Hi Chris,

 

The menu shopuld look something like this:

 

<ul id="nav" class="dropdown">
<li class="home-btn"><a href="#">home</a></li>
<li class="about-btn"><a href="#">about</a>
<ul>
<li><a href="#">Company Profile</a></li>
<li><a href="#">Ethos</a></li>
<li><a href="#">Our People</a></li>
<li><a href="#">Benefits of working with us</a></li>
<li><a href="#">Join us</a></li>
</ul>
</li>
</ul>

 

You were just missing the anchor link on the about li.

 

Hope this helps.

 

Thanks

 

Nils

Edited February 10, 201214 yr by Renaissance-Design
Please use the code button or tags to format your code.

Thanks I see what you mean but I don't have anchor text on the home? If that makes sense? Maybe i need to put some anchor text in, or give it a class and set it to invisible?

Don't try display: none; or visibility: hidden; as it's bad for SEO.

 

However, blind people must have link text for a screen reader to read, so it's usual to add a class to the "a" styles for the tabs with an image button and add display: block; text-indent: -9999px; which moves it off-screen but screen readers will still read it.