This is Interesting: Free Magazines for Graphics designers and webmasters  


Home > Archive > Stylesheets > May 2005 > Single level drop menu





You are viewing an archived Text-only version of the thread. To view this thread in it's original format and/or if you want to reply to this thread please [click here]

Author Single level drop menu
michael

2005-05-10, 7:34 pm

Is it possible for a single-level css dropmenu, whereby headings are
aligned horizontally in navbar style, and their subpoints appearing
directly below on hover, to have the following list structure?:

<div id="menu">
<ul>
<li>heading1
<ul>
<li>subpoint1</li>
<li>subpoint2</li>
</ul>
</li>
</ul>

<ul>
<li>heading2
<ul>
<li>subpoint1</li>
<li>subpoint2</li>
</ul>
</li>
</ul>
</div>

I'm not quite sure how to get the sub-points back below the headings on
hover. My non-functional attempt below:

<style>

#menu ul {
padding: 0;
margin: 0;
list-style: none;
}

#menu a {
display: block;
width: 10em;
}

#menu ul { float: left;
width: 10em;
}

#menu .sub li {
position: absolute;
width: 10em;
left: -999em;
}

#menu li:hover ul {
left:
auto;
}

</style>

<div id="menu">

<ul class="head low">

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

<ul class="sub">
<li><a href="">subpoint1</a></li>
<li><a href="">subpoint2</a></li>
</ul>

</li>

</ul>

<ul class="head low">

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

<ul class="sub">
<li><a href="">subpoint1</a></li>
<li><a href="">subpoint2</a></li>
</ul>

</li>

</ul>

</div>

Any pointers would be appreciated!

Michael

--
Faith is the quality that enables you to eat blackberry jam on a picnic
without looking to see whether the seeds move.

Barbara de Zoete

2005-05-10, 7:34 pm

On Tue, 10 May 2005 23:26:58 +0200, michael <spam@noreply.org> wrote:

> Is it possible for a single-level css dropmenu, whereby headings are
> aligned horizontally in navbar style, and their subpoints appearing
> directly below on hover, to have the following list structure?:
>


<example code snipped>

Create one list, with two levels. Not a single list for each item.

See
<http://groups.google.com/groups?&q=...ing.stylesheets>
as this is not the first time it gets explained.

> I'm not quite sure how to get the sub-points back below the headings on
> hover. My non-functional attempt below:
>


If it is non-functional, why include? Why include any code at all? Put up
a mockup or example page on a URL somewhere.


--
,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.
| weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
| webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
|zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
`-------------------------------------------------- --<--@ ------------'
michael

2005-05-11, 4:22 am

> Create one list, with two levels. Not a single list for each item.

In other words, in CSS, is it impossible to turn the particular list
structure I used as example, into a drop menu?

Michael

--
Politics is like coaching a football team. you have to be smart enough
to understand the game but not smart enough to lose interest.


Barbara de Zoete

2005-05-11, 4:22 am

On Wed, 11 May 2005 07:04:34 +0200, michael <spam@noreply.org> wrote:

>
> In other words, in CSS, is it impossible to turn the particular list
> structure I used as example, into a drop menu?
>


Why would you want to keep that stupid part of code? A list is a list. Not
ten lists.

Like I said: See <http://groups.google.com/
groups?&q=horizontal+drop+down&meta=group%3Dcomp.infosystems.www.authoring.stylesheets>
as this is not the first time it gets explained.


--
,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.
| weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
| webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
|zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
`-------------------------------------------------- --<--@ ------------'
michael

2005-05-11, 4:22 am

> Why would you want to keep that stupid part of code? A list is a list. Not
> ten lists.


So in other words, a horizintal drop menu can impossibly be styled to work
according to that specific structure? Stupid or not....

Thanks,
Michael

--
When a fellow says, "It ain't the money but the principle of the
thing," it's the money.
-- Kim Hubbard


Barbara de Zoete

2005-05-14, 7:47 am

On Tue, 10 May 2005 23:26:58 +0200, michael <spam@noreply.org> wrote:

> Is it possible for a single-level css dropmenu, whereby headings are
> aligned horizontally in navbar style, and their subpoints appearing
> directly below on hover, to have the following list structure?:
>


<example code snipped>

Create one list, with two levels. Not a single list for each item.

See
<http://groups.google.com/groups?&q=...ing.stylesheets>
as this is not the first time it gets explained.

> I'm not quite sure how to get the sub-points back below the headings on
> hover. My non-functional attempt below:
>


If it is non-functional, why include? Why include any code at all? Put up
a mockup or example page on a URL somewhere.


--
,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.
| weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
| webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
|zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
`-------------------------------------------------- --<--@ ------------'
Sponsored Links


Copyright 2003 - 2008 forum4designers.com  Software forum  Computer Hardware reviews