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.
| |
|
|
| 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 |
`-------------------------------------------------- --<--@ ------------'
|
|
|
| | Copyright 2003 - 2008 forum4designers.com Software forum Computer Hardware reviews |
|