Problem with creating microsoft.com stlye menu of links

B

Bob Evans

I want to be able to include basic hyperlinks in the left column of a page
and have it appear simiilar to those shown on the home page for
www.microsoft.com . I have not been successful. The following mirrors what
is done on the microsoft site, but it highlights only the hyperlink and not
the entire line of the paragraph.

<html>

<head>
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">
<title>Sample Hover Frame</title>
<style type="text/css" media="all">
#Nav{padding:2px 0 10px 0px;}
#Nav p{margin:0 2px 0 2px;padding:2px 4px 4px 8px;border:1px 1px 1px
1px;width:expression(NavTd.clientWidth-4);}
#Nav a{color:#000000;border:0px none;}
#Nav a:hover{color:#000000;border:1px solid
#cccccc;background-color:#f1f1f1;text-decoration:none;}
</style>
</head>

<body>

</p>
<table border="1" cellpadding="0" cellspacing="0" style="border-collapse:
collapse" bordercolor="#111111" width="100%">
<tr>
<td width="100%" id="NavTd">
<div id="Nav" width="200px">
My Menu<p><a href="One.htm">One</a></p>
<p><a href="Two.htm">Two</a></p>
<p>&nbsp;
</div>
</td>
</tr>
</table>

</body>

</html>
 
B

Bob Evans

I had (hence the name #Nav in my exampe.) I had pared it down too far. Here
is a working example of what I was trying to do with the fewest number of
styles.

Thanks for the suggestion,
Bob


<html>
<head>
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">
<title>Sample Hover Frame</title>
<style type="text/css" >
a{text-decoration:none;color:#003399;}
a:hover{text-decoration:underline;color:#ff3300;}
#Nav{padding: 2px 0 10px 0px;font: 1em Verdana, Arial;}
#Nav ul{list-style: none;margin: 0;padding: 0;}
#Nav li{padding: 0;margin: -4px 2px;width: 175px;}
#Nav a{position: relative;cursor: pointer;display: block;color:
#000000;padding: 2px 4px 4px 8px;margin: 1px 0px;}
#Nav a:visited{color: #000000;}
#Nav a:hover{border: 1px solid #cccccc;margin: 0px;padding: 2px 4px 4px
7px;background-color: #f1f1f1;text-decoration: none;}
</style>
</head>
<body>
</p>
<table border="1" cellpadding="0" cellspacing="0" style="border-collapse:
collapse" bordercolor="#111111" width="100%">
<tr>
<td width="100%" id="NavTd">
<div id="Nav" width="200px">
<h4>My Menu</h4>
<ul>
<li><a href="One.htm">One</a></li>
<li><a href="Two.htm">Two</a></li>
</ul>
</div>
</td>
</tr>
</table>
</body>
</html>
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Menu to drop down only on arrow? 3
please help me fix my code. it will not work in ie but worksperfectly in firefox 5
Problem seeing some characters when sending email to Outlook client 60
newbie trying to use data access web page (Access 2003) 0
Using a format setting in a css file 3
Aligning trouble 4
pages don't work in Firefox? 2
HTML editing - span 0

Top