By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,785 Members | 1,072 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,785 IT Pros & Developers. It's quick & easy.

CSS menu

P: n/a
I have a CSS menu that looks a lot like the navigation menu at L.L.
Bean. What I want to do is make an effect like the one at Microsoft's
website where you go over a link and it makes a box around it that
covers the height of the link but the width of the table not the width
of just the link. How can I get that effect in CSS? Whenever I try to
do a border with padding it doesn't work. Here is my CSS so far
.NavBody {
margin: 0px;
padding: 0 0 0 0;
}
.NavHeaderTD {
background: #6699FF;
}
.NavContentTD {
background: #66CCFF;
}
div.NavHeaderDIV {
padding: 4px 4px 4px 4px;
font-size:10pt;
font-weight: bold;
text-align: center;
text-transform: uppercase;
}
div.NavLinkDIV {
margin: 1px 0px;
padding-right: 5px;

}
div.NavLinksDIV {
margin-left: 13px;
}
a.NavLinkA:link, a.NavLinkA:visited {
color: #000000;
text-decoration: none;
}
a.NavLinkA:hover {
border: solid 1px #000000;
background-color: #6666FF;
color: #000000;
text-decoration: none;
}
Jul 20 '05 #1
Share this Question
Share on Google+
3 Replies


P: n/a
Els
Mark Constant wrote:
I have a CSS menu that looks a lot like the navigation menu at L.L.
Bean. What I want to do is make an effect like the one at Microsoft's
website where you go over a link and it makes a box around it that
covers the height of the link but the width of the table not the width
of just the link. How can I get that effect in CSS? Whenever I try to
do a border with padding it doesn't work. Here is my CSS so far


[snip css]

Difficult to see what happens without a url, and I didn't
feel like guessing your page's html code, so here's for you
to test: add "display:block" to the links, and maybe
"width:100%" will help even further.

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vo. O resto imperfeito.
- Renato Russo -

Jul 20 '05 #2

P: n/a

"Mark Constant" <co*******@mix-net.net> wrote in message
news:ce**************************@posting.google.c om...
I have a CSS menu that looks a lot like the navigation menu at L.L.
Bean. What I want to do is make an effect like the one at Microsoft's
website where you go over a link and it makes a box around it that
covers the height of the link but the width of the table not the width
of just the link. How can I get that effect in CSS?


You can use :hover with whatever class you assign to the blocks in the menu.
That won't work in IE, though. If you examine what Microsoft does, it uses a
behavior library (an .htc file) that is referenced in /homepage/ms.css, and
*that* won't work in any *other* browser, since it's a Microsoft proprietary
feature. Bring up the Microsoft home page in Mozilla, for example, and
you'll see that it looks very different there.

Jul 20 '05 #3

P: n/a

"Mark Constant" wrote...
I have a CSS menu that looks a lot like the navigation menu at L.L.
Bean. What I want to do is make an effect like the one at Microsoft's
website where you go over a link and it makes a box around it that
covers the height of the link but the width of the table not the width
of just the link. How can I get that effect in CSS?


Are you looking for something like the links on the left side of this page?
http://matroska.org

It was done in CSS I believe.
Pamel
Jul 20 '05 #4

This discussion thread is closed

Replies have been disabled for this discussion.