Re: [css-d] help with single level drop down menu
Crud, I just realized that this won't work on IE6 and I still have users on that browsers (sadly). -Original Message- From: Bobby Jack [mailto:bobbykj...@yahoo.co.uk] Sent: Thursday, March 04, 2010 10:40 AM To: 'css discuss'; Angela French Subject: Re: [css-d] help with single level drop down menu --- On Thu, 3/4/10, Angela French wrote: > Bobby, > You solution works, but it means that the sub menu would > always have to be "attached" to the top menu item. That's why I provided that example link which does have a gap between the top item and the submenu, but still works. The way that's done is that there are two nested elements' boxes for the top menu item: the outer touches the submenu, the inner has its background styled with a gap below it. **The :hover is then applied to this outer element** - that's the key. If you take a look at that example with firebug, it should be pretty clear how it's being done. Cheers, - Bobby __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] help with single level drop down menu
I'm trying to implement the menu from webdesignerwall and have a question. When
I set a background color on #nav, the nav list is rendered below the long strip
of background color. If I set a height to #nav this is fixed, but the author
did not set a height on her. I'm wondering how she gets the floated nav items
to render in the nav (visually appearance). Thank you.
-Original Message-
From: Bobby Jack [mailto:bobbykj...@yahoo.co.uk]
Sent: Thursday, March 04, 2010 10:11 AM
To: 'css discuss'; Angela French
Subject: Re: [css-d] help with single level drop down menu
--- On Thu, 3/4/10, Angela French wrote:
> Hello,
> I am trying to create drop down menus (one level, dropping
> down from horizontal list items in a top nav bar). My
> issue is that that, while the drop down menu appears when
> hovering over top level list item, when the user moves OFF
> of that list item to move into the drop down sublist, the
> sublist disappears.
Hi Angela,
You have a gap between your toplistitem and your sublist. When the pointer
moves over this gap, it's no longer hovering over the toplistitem, so the
:hover style doesn't apply. Try setting:
div#navbar li.toplistitem { height: 29px; }
to confirm this. That's probably not the style that you *want*, but that's the
cause of the problem.
If you want an example of how to build a really nice dropdown menu, take a look
at this one I stumbled across today:
http://www.webdesignerwall.com/tutorials/css3-dropdown-menu/
- Bobby
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] help with single level drop down menu
--- On Thu, 3/4/10, Angela French wrote: > Bobby, > You solution works, but it means that the sub menu would > always have to be "attached" to the top menu item. That's why I provided that example link which does have a gap between the top item and the submenu, but still works. The way that's done is that there are two nested elements' boxes for the top menu item: the outer touches the submenu, the inner has its background styled with a gap below it. **The :hover is then applied to this outer element** - that's the key. If you take a look at that example with firebug, it should be pretty clear how it's being done. Cheers, - Bobby __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] help with single level drop down menu
Bobby,
You solution works, but it means that the sub menu would always have to be
"attached" to the top menu item.
-Original Message-
From: Bobby Jack [mailto:bobbykj...@yahoo.co.uk]
Sent: Thursday, March 04, 2010 10:11 AM
To: 'css discuss'; Angela French
Subject: Re: [css-d] help with single level drop down menu
--- On Thu, 3/4/10, Angela French wrote:
> Hello,
> I am trying to create drop down menus (one level, dropping
> down from horizontal list items in a top nav bar). My
> issue is that that, while the drop down menu appears when
> hovering over top level list item, when the user moves OFF
> of that list item to move into the drop down sublist, the
> sublist disappears.
Hi Angela,
You have a gap between your toplistitem and your sublist. When the pointer
moves over this gap, it's no longer hovering over the toplistitem, so the
:hover style doesn't apply. Try setting:
div#navbar li.toplistitem { height: 29px; }
to confirm this. That's probably not the style that you *want*, but that's the
cause of the problem.
If you want an example of how to build a really nice dropdown menu, take a look
at this one I stumbled across today:
http://www.webdesignerwall.com/tutorials/css3-dropdown-menu/
- Bobby
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] help with single level drop down menu
--- On Thu, 3/4/10, Angela French wrote:
> Hello,
> I am trying to create drop down menus (one level, dropping
> down from horizontal list items in a top nav bar). My
> issue is that that, while the drop down menu appears when
> hovering over top level list item, when the user moves OFF
> of that list item to move into the drop down sublist, the
> sublist disappears.
Hi Angela,
You have a gap between your toplistitem and your sublist. When the pointer
moves over this gap, it's no longer hovering over the toplistitem, so the
:hover style doesn't apply. Try setting:
div#navbar li.toplistitem { height: 29px; }
to confirm this. That's probably not the style that you *want*, but that's the
cause of the problem.
If you want an example of how to build a really nice dropdown menu, take a look
at this one I stumbled across today:
http://www.webdesignerwall.com/tutorials/css3-dropdown-menu/
- Bobby
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] help with single level drop down menu
> My issue is that that, while the drop down menu appears when hovering over
> top level list item, when the user moves OFF of that list item to move into
> the drop down sublist, the sublist disappears.
My immediate guess, without getting to see the page, is that you need to add a
sublist:hover rule so that when you move off of the toplistitem, there's still
a rule making the sublist show up.
Like:
div#navbar li.toplistitem ul:hover { /* lists nested under hovered list items */
display: block;
}
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] help with single level drop down menu
Angela French wrote: > Hello, > I am trying to create drop down menus (one level, dropping down from > horizontal list items in a top nav bar). My issue is that that, while the > drop down menu appears when hovering over top level list item, when the user > moves OFF of that list item to move into the drop down sublist, the sublist > disappears. I must be missing something in my css that keeps the list > visible. My Css is as as follows. Thank you for any suggestions. > You are much more likely to get an answer if you could provide the list with a clickable link to the problem page stating your os and browsers in which the problem occurs. -- desktop http://chelseacreekstudio.com/ mobile http://chelseacreekstudio.mobi/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] help with single level drop down menu
Hello,
I am trying to create drop down menus (one level, dropping down from horizontal
list items in a top nav bar). My issue is that that, while the drop down menu
appears when hovering over top level list item, when the user moves OFF of that
list item to move into the drop down sublist, the sublist disappears. I must
be missing something in my css that keeps the list visible. My Css is as as
follows. Thank you for any suggestions.
div#navbar ul.toplist
{
padding: 0;
list-style: none;
}
div#navbar li.toplistitem { /* all list items in top nav*/
float: left;
position: relative;
padding: 0;
font-family:Verdana, san-serif;
font-size:.75em;
height:25px;
width:16.53%;
}
div#navbar ul.sublist { /* second-level lists */
display: none;
position: absolute;
list-style: none;
top: 29px;
left: 0;
width: 300px;
background-color:#F9F2D1;
background-color:#FEFAE9;
padding-bottom:20px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-left: 1px solid #F9EBAE;
border-right: 1px solid #F9EBAE;
border-bottom: 1px solid #F9EBAE;
}
div#navbar li.toplistitem:hover
{
background-color:#FEFAE9;
}
div#navbar li.toplistitem:hover ul { /* lists nested under hovered list items */
display: block;
}
div#navbar ul.sublist li.sublistitem
{
line-height:140%;
padding:15px;
font-size:.9em;
margin-bottom:-20px;
}
div#navbar a.itemtitle
{
font-weight:bold;
font-size:1.2em;
}
Angela French
Internet Specialist
State Board for Community and Technical Colleges
360-704-4316
http://www.checkoutacollege.com
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
