/    Sign up×
Community /Pin to ProfileBookmark

[RESOLVED] Navigation Bar

Hello,

I am developing a navigation bar for my website. I currently have a table with a single row and six cells (each cell with a link to another page on my site). I am using some onMouseover to change the cell’s background color via a declared class and CSS:

<td class=”classname”>

.classname{ background-color: #999999;}
.classname hover:{ background-color: #BBBBBB;}

Now, I want to add a menu or a column with more links under the highlighted table cell. Can I achieve this with just HTML and CSS or do I have to use javascript to accomplish this?

At first, I was thinking strictly javascript, but now I am wondering if it can be done using the visibility property. Ah, but I see at w3schools, it says that layout is affected. This is undesired, as I want the menu to drop down over top of any text, div, and so forth. Actually, I am shooting for something along the lines of what Microsoft has done here: [url]http://www.microsoft.com/learning/en/us/default.aspx[/url] although, I am not running asp.net. Specifically, I like how the custom arrow points to the right until mouseover and then it points down to a text area with links.

Anyway, I am searching for tips/suggestions before I go posting all over the place in different forums. Thanks!

to post a comment
Full-stack Developer

2 Comments(s)

Copy linkTweet thisAlerts:
@vb2javaauthorMar 14.2012 — Hi spufi,

Thanks for the links! That is exactly what I was looking for. Thanks for the tip as well. I use division based layouts. I just never really spent much time on a nav bar. I was using regular old links. No list or anything just some &nbsp; inside a div. Yeah, I guess it was time to branch out a bit, eh? lol
×

Success!

Help @vb2java spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.7,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...