/    Sign up×
Community /Pin to ProfileBookmark

How does this work?

Copy linkTweet thisAlerts:
Aug 25.2004

You know one thing that still baffles me in all of CSS is how those cute little menus work. I even use one, and I still don’t get how it works.

Anyway, recently It was pointed out to me that I wasn’t exactly doing it right – and I should be using list. So I modified the menu and hey presto it works. Woo hoo. Problem is that since I don’t actually know how it works, I had better check with you guys that I am doing it right. Ha ha!

.menu_container a {display: block;
text-decoration: none;
padding: 1px 0px 1px 5px;
width:111px; }
.menu_container ul {margin:0;
list-style-type:none;}
.menu{ background-color:#D7D7D7;
color:#504040; }
a:hover.menu, a.down {background-color:
#990000; color: #FFFFFF; }

<div class=”menu_container”>
<h5 class=”menu_hd”>Product<br>Categories</h5>
<ul>
<li><a class=”down” href=”blah1″>blah1</a></li>
<li><a class=”menu” href=”blah2″>blah2>/a></li>
<li><a class=”menu” href=”blah3″>blah3</a></li>
</ul>

to post a comment
JavaScript

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@CharlesAug 25.2004 — Check for yourself. Make certain that everything first passes the [url=http://validator.w3.org/]HTML Validator[/url] and then [url=http://jigsaw.w3.org/css-validator/]CSS Validator[/url].

And then you ought to check your page against the [url=http://www.w3.org/TR/WCAG10/full-checklist.html]Accessibility Checklist[/url].
Copy linkTweet thisAlerts:
@FangAug 25.2004 — This will explain how it's done:http://www.alistapart.com/articles/taminglists/
Copy linkTweet thisAlerts:
@SuzanneBauthorAug 25.2004 — It validates, Charles, but that is not the point. I was wondering whether it was correct. You see I seem to be able to randomly change it and yet it still works. I often wonder if everyone interpretation of how it works is the same - if you see what I mean.


Ah..Fang! Now I see. Actually, my code was slightly wrong. The correct code makes a LOT more sense. Well,it looks better to me anyway. There is no need for the link classes. I thought that was a bit stupid.

.menu_container ul {margin:0; list-style-type:none;}

.menu_container li a {display: block;

padding: 1px 0px 1px 5px;

width:111px;

text-decoration: none;

background-color:#D7D7D7;

color:#504040;}

.menu_container li a:hover {background-color:#990000; color:#FFFFFF; }

Then the menu becomes..

<div class="menu_container">

<h5 class="menu_hd">Product<br>Categories</h5>

<ul>

<li><a href="blah1">blah1</a></li>

<li><a href="blah2">blah2>/a></li>

<li><a href="blah3">blah3</a></li>

</ul>

Notice the lack of classes in the links.
Copy linkTweet thisAlerts:
@SuzanneBauthorAug 25.2004 — By the way, sorry for posting in the wrong forum. Oops.
×

Success!

Help @SuzanneB 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.15,
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,
)...