Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

CSS Menu: Need link to work when over <li>, not just text

Status
Not open for further replies.
Spork52

Spork52

Programmer
Nov 20, 2007
134
US
I'm working on an CSS menu but I've hit a couple of problems:

1) I want the links to work and the text color to change when rolling over anywhere in a <li>. RIght now, this only happens if the cursor is over the text. Is there some way to do this with CSS only (no images and no Javascript)? I tried putting the <a> tags around the <li> tags (can't be good) and it worked in Safari OS X, but not in IE or FF.

2) The CSS lowercases the sub-sub-department names and then uppercases the first letter. In Safari OS X the first letters do not change color when rolling over. (The department names are all cap and are in a database that I don't have access to. Server-side scripting not an option either.)

Code: 
<html>
<head>
<style type="text/css">
#leftnav
	{
	font-family: "Lucida Sans Unicode", "Lucida Grande", Arial, "trebuchet ms", Helvetica, sans-serif;
	font-size: 12px;
	line-height: 12px;
	letter-spacing:0px;
	margin: 0px;
	padding: 0px;
	text-indent: 0px;
	font-weight: bold;
	list-style-type: none;
	width:150px;
	}
#leftnav a
	{
	color:#000000;
	text-decoration: none;
	}
#leftnav a:hover
	{
	color:#AA0000;
	}
#leftnav li
	{
	border-top: 1px dotted #222;
	text-indent: 0px;
	margin: 0px;
	padding: 4px 0px 4px 0px;
	}
#leftnav li:hover
	{
	background-color:#DEDEDE;
	}
#leftnav ul
	{
	font-size: 10px;
	margin: 0px;
	padding: 0px 0px 1px 0px;
	list-style-type: none;
	}
#leftnav ul li
	{
	margin: 3px 0px 0px 0px;
	padding: 4px 0px 1px 0px;
    text-indent: 8px
	}
#leftnav ul ul
	{
	font-size: 10px;
	text-transform:lowercase;
    margin: 0px;
	padding: 0px;
	}
#leftnav ul ul li
	{
	border-top: none;
	margin: 3px 0px 0px 0px;
	padding: 1px 0px 2px 0px;
    text-indent: 16px
	}
#leftnav ul ul li:first-letter
    {
    text-transform: capitalize;
    } 
</style>
</head>
<body>
<div style="transparent; padding:0px; margin:0px">
<ul id="leftnav">
    <li><a href="#">DEPARTMENT 1</a></li>
    <li><a href="#">DEPARTMENT 2</a></li>
    <ul>
        <li><a href="#">DEPARTMENT 2.1</a></li>
        <ul>
            <li><a href="#">DEPARTMENT 2.1.1</a></li>
            <li><a href="#">DEPARTMENT 2.1.2</a></li>
            <li><a href="#">DEPARTMENT 2.1.3</a></li>
        </ul><li><a href="#">DEPARTMENT 2.2</a></li>
        <li><a href="#">DEPARTMENT 2.3</a></li>
    </ul>
    <li><a href="#">DEPARTMENT 3</a></li>
    <li><a href="#">DEPARTMENT 4</a></li>
</ul>
</div>
</body>
</html>
 
Sort by date Sort by votes
1. You're right, your solution is not good. Instead, set your anchors to display as blocks in CSS. If that is not enough, add the width as well.
Code: 
#leftnav a
    {
    color:#000000;
    text-decoration: none;
    [blue]display: block;[/blue]
[red] /* width: 100%; add only if needed */ [/red]
    }

2. I would put the text transform property in the anchor definition as well -- it is the anchor text you want to capitalize. And, capitalize means putting the first character of each word in uppercase ( so there is no need for the :first-letter selector.
Code: 
#leftnav a
    {
    color:#000000;
    text-decoration: none;
    display: block;
    [blue]text-transform: capitalize;[/blue]
 /* width: 100%; add only if needed */   
    }

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]
 
Upvote 0 Downvote
1) Display as block worked except for IE6 (of course), but width: 100% fixed that. Thank you.

2) Capitalize only works if words are all lowercase to begin with. That's why I used lowercase and then capitalized the first letter. I messed around a bit and got it working with:

Code: 
#leftnav ul ul li a
	{
	text-transform: lowercase;
	}
#leftnav ul ul li a:first-letter
    {
    text-transform: capitalize;
    }

Unfortunately, that only capitalizes the first word, but without server-side scripting or access to the DB, I think that's as close as I'm going to get.
 
Upvote 0 Downvote
Well, I celebrated too soon. All kinds of weird things happened, so I started over and ended up with something that works everywhere except for IE6, in which the rollover only affects the first letter. I figure I'll use some conditional comments to fix that.

Code: 
<html>
<head>
<style type="text/css">
#leftnav
    {
    font-family: "Lucida Sans Unicode", "Lucida Grande", Arial, "trebuchet ms", Helvetica, sans-serif;
    font-weight: bold;
    letter-spacing:0px;
    margin: 0px;
    padding: 0px;
    text-indent: 0px;
    list-style-type: none;
    width:100%;
    }
#leftnav li a
    {
    font-size: 12px;
    line-height: 12px;
	border-top: 1px dotted #222;
    text-decoration: none;
    color:#000000;
	background-color:#DDDDDD;
    padding: 6px 0px 6px 0px;
	display: block;
	width: 100%;
    }
#leftnav li a:hover
    {
    background-color:#666666;
    color:#FFFFFF;
   }
#leftnav ul
    {
    margin: 0px;
    padding: 0px 0px 0px 0px;
    list-style-type: none;
  	}
#leftnav ul li a
    {
    font-size: 10px;
    line-height: 10px;
    padding: 4px 0px 4px 0px;
    text-indent: 8px;
	background-image: url(bullet.png);
    background-repeat: no-repeat;
    background-position: 0px 6px; 
    }
#leftnav ul ul
    {
    padding: 0px 0px 2px 0px;
    list-style-type: none;
	}
#leftnav ul ul li a
    {
    border-top: none;
    padding: 2px 0px 2px 0px;
    text-indent: 16px;
	background-image: url(bulletsmall.png);
    background-repeat: no-repeat;
    background-position: 8px 5px; 
    text-transform: lowercase;
   }
#leftnav ul ul li a:first-letter
    {
    text-transform: capitalize;
    } 
</style>
<!--[if IE]>
<style type="text/css">
#leftnav li a
    {
    margin: -2px 0px 0px 0px;
    }
</style>
<![endif]-->
</head>
<body>
<div style="background-color:#DDDDDD; padding:0px; margin:0px; width:150px;">
<ul id="leftnav">
    <li><a href="#">DEPARTMENT 1</a></li>
    <li><a href="#">DEPARTMENT 2</a></li>
    <ul>
        <li><a href="#">DEPARTMENT 2.1</a></li>
        <ul>
            <li><a href="#">DEPARTMENT 2.1.1</a></li>
            <li><a href="#">DEPARTMENT 2.1.2</a></li>
            <li><a href="#">DEPARTMENT 2.1.3</a></li>
        </ul><li><a href="#">DEPARTMENT 2.2</a></li>
        <li><a href="#">DEPARTMENT 2.3</a></li>
    </ul>
    <li><a href="#">DEPARTMENT 3</a></li>
    <li><a href="#">DEPARTMENT 4</a></li>
</ul>
</div>
</body>
</html>
 
Upvote 0 Downvote
Finally:

Code: 
#leftnav a:first-letter
    {
    text-transform: capitalize;
    }

instead of

Code: 
#leftnav ul ul li a:first-letter
    {
    text-transform: capitalize;
    }

did the trick.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
396
3esolar
3
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
408
pmonett
pmonett
jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
786
spamjim
spamjim
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
325
PeDa
PeDa
cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
464
spamjim
spamjim

Part and Inventory Search

Sponsor

Back
Top