/    Sign up×
Community /Pin to ProfileBookmark

Drop Down Menu – Problem With Widths

Copy linkTweet thisAlerts:
Mar 24.2006

Hi
I am having trouble with a drop down menu I have created.

They way I initially set it up, was that the list items where a fixed size as there were meant to be 6 nav options to be displayed. (i thought his may be a problem at the time).

Anyway my nav now needs 7 nav items and i am having trouble fitting them all in.

Does this mean that each nav item will have to be its own class? – If it is I don’t really know how to make it work.

I tried but it meant the drop downs would not display as how they should.
Is there any chance someone can guide me or point me in the right direction please.

Here is what I mean

[url]http://www.boostnowbreaks.co.uk/nav/test-navigation.htm[/url]

Let me know

Thanks alot!

to post a comment
CSS

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@jogolMar 24.2006 — 1 x 48px (ul#nav li#homeicon) + 6 x 118px (ul#nav li) + 1 x 122px (ul#nav li#last) = [B]878px > 760px[/B] (ul#nav)

[CODE]ul#nav li {
list-style-type: none;
position: relative;
float: left;
width:102px;
}
ul#nav li#last {
background:#0C910E;
width:100px;
}[/CODE]
1 x 48px (ul#nav li#homeicon) + 6 x 102px (ul#nav li) + 1 x 100px (ul#nav li#last) = [B]760px = 760px[/B] (ul#nav)
Copy linkTweet thisAlerts:
@mumfordauthorMar 24.2006 — Thats great, thanks

What I ideally need is not having them a fixed width, if you look at the menu again, the 3rd tab should say "conference centre" I would not mind if the navbar had to be higher to accomodate this.

Does that make sense?

Thanks again
Copy linkTweet thisAlerts:
@jogolMar 24.2006 — instead of giving ul#nav li and ul#nav li#last a width, give them a left and right padding. though each menu item won´t have the same width then. like here: http://www.etagenoir.com/
Copy linkTweet thisAlerts:
@mumfordauthorMar 24.2006 — Thanks, but I did try that as soon as I took widths out the drop down menu would display in one line
×

Success!

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