Simple Menu using UL/LI and A

[karlectomy]

Hello,

I want to make the whole <li> element a link and clickable. here is my code that I have:

#nav {
background-color:#99CCFF;
border-color:#000066;
border-style:solid;
border-width:.75px;
width:150px;
height:700px;
}
 
#menu {
    list-style-type:none;
    padding-left:4px;
    margin:0px;
}
 
#menuitem {
 width:140px;
 border-style:solid;
 border-color:#000000;
 border-width:.75px;
 padding-top:5px;
}
 
#nav a, #nav a:visited {
text-decoration:none;
color:#000000;
 
}
 
#menuitem li:hover {
  background-color:#CCCCCC;
}
 
<div id="nav">
    <ul id="menu">
        <a href="index.htm" id="menulink"><li id="menuitem">Home</li></a>
        <a href="bio.htm" id="menulink"><li id="menuitem">Bio</li></a>
        <a href="articles.php" id="menulink"><li id="menuitem">Articles</li></a>
        <a href="clients.php" id="menulink"><li id="menuitem">Clients</li></a>
        <a href="links.htm" id="menulink"><li id="menuitem">Links</li></a>
    </ul>
</div>
 

Does anyone have any suggestions?

[drhowarddrfine]

'id' is a unique name which is given to one element only. If you must use the same style for multiple elements, use 'class'.

You are using :hover for the <li> element. This will only work in modern browsers and not IE6.

[karlectomy]

'id' is a unique name which is given to one element only. If you must use the same style for multiple elements, use 'class'.

You are using :hover for the <li> element. This will only work in modern browsers and not IE.

I know I know, i was trying to use the hover for style. But I want to make the whole <li> clickable. Do you know how to do this?

[drhowarddrfine]

You cannot have the <a> outside the <li> because <a> will be treated as another element, which would be illegal for an <ul>.

So, <li><a href.......

Then, in css, you need to make the <a> extend the width of the <li>. But <a> is inline while <li> is block level. So:
ul li a{display:block;width:200px}

Another way to do that is position it:
ul li a{float:left;width:200px;}

The float is necessary to position it but you can use any positioning method, I think. Don't recall if you also have to position the <li> to the same width as the <a>.

[karlectomy]

You cannot have the <a> outside the <li> because <a> will be treated as another element, which would be illegal for an <ul>.

So, <li><a href.......

Then, in css, you need to make the <a> extend the width of the <li>. But <a> is inline while <li> is block level. So:
ul li a{display:block;width:200px}

Another way to do that is position it:
ul li a{float:left;width:200px;}

The float is necessary to position it but you can use any positioning method, I think. Don't recall if you also have to position the <li> to the same width as the <a>.

Ok, I'm a little slow. I'm creating a Vertical Menu... Not horizontal for which the float left is necessary.

Do you know how this could work with a vertical menu?

[drhowarddrfine]

Perhaps you read my post before I edited it. Use the css for 'display:block'.

[karlectomy]

Have I ever told you, you're my hero.

Thanks for pointing me in the right direction. That really helped a lot.

Remember, you are the wind beneath my wings.

[Markus]

Javascript would make that so easy! No need to expand the <a> n such.

 <script type="text/javascript" language="javascript">
  function goToLink(url){
    window.location = "http://"+url+""
    }
 </script>
 

<a onclick="goToLink('url_here')">go to</a>
 

Sorry if i strayed from your question.

[karlectomy]

Javascript would make that so easy! No need to expand the <a> n such.

 <script type="text/javascript" language="javascript">
  function goToLink(url){
    window.location = "http://"+url+""
    }
 </script>
 

<a onclick="goToLink('url_here')">go to</a>
 

Sorry if i strayed from your question.

I try to stay away from javascript. We got into a drunken argument and we don't really talk anymorre

[drhowarddrfine]

Javascript would make that so easy! No need to expand the <a> n such.

 <script type="text/javascript" language="javascript">
  function goToLink(url){
    window.location = "http://"+url+""
    }
 </script>
 

<a onclick="goToLink('url_here')">go to</a>
 

Sorry if i strayed from your question.

I don't see how all that is simpler than:
ul li a{display:block;width:200px}

Plus it works even if js is disabled.

[karlectomy]

I don't see how all that is simpler than:
ul li a{display:block;width:200px}

Plus it works even if js is disabled.

I concur with your findings