在suckerfish菜单中更改的值 [英] Values to change in suckerfish menu
问题描述
下面显示的样式表来自suckerfish垂直菜单。
http://www.htmldog.com/articles/suck.../vertical.html
我添加了一个几个小的颜色变化代码水平。
我将第一级的宽度更改为8em并获得不需要的空间
介于它和第二级之间。
当我改变宽度时，我希望他们的水平之间没有差距。
要做什么改变呢？
另外，我不明白左： - 999em的原因。在一个定义中。
但是，更改值会产生一些有趣的结果。
< style type =" text / css">
body {
font-family：arial，helvetica，serif;
}
#nav ，＃nav ul {/ *所有列表* /
填充：0;
保证金：0;
list-style：none;
浮动：左;
宽度：11em;
}
#nav li {/ *所有列表项* /
位置：相对;
浮动：左;
行高：1.25em;
margin-bottom：-1px;
宽度：11em;
}
#nav li ul {/ *二级列表* /
位置：绝对;
左：-999em;
margin-left： 11.05em;
margin-top：-1.35em;
}
#nav li ul ul {/ * third-和以上级别列表* /
剩余：-999em;
}
#nav li a {
宽度：8em;
显示：块;
颜色：黑色;
font-weight：bold;
text-decoration：none;
背景色：#FAA;
边框：1px纯黑色;
填充：0 0.5em;
}
#nav li li a {
宽度：8em;
w \ width：10em;
显示：块;
颜色：黑色;
字体重量：粗体;
text-decoration：none;
background-color：＃0F0;
border：1px纯黑色;
填充：0 0.5em;
}
#nav li li li a {
宽度：11em;
w \ width：10em;
显示：块;
颜色：黑色;
font-weight：bold;
text-decoration：none;
背景色：#DDF;
边框：1px纯黑色;
填充：0 0.5em;
}
#nav li a：悬停{
颜色：白色;
背景颜色：黑色;
}
＃ nav li：hover ul ul，＃nav li：hover ul ul ul，＃nav li.sfhover ul ul，＃nav
li.sfhover ul ul ul {
left ：-999em;
}
#nav li：hover ul，＃nav li li：hover ul，#nav li li li：hover ul，＃ nav
li.sfhover ul，#nav li li.sfhover ul，#nav li li li.sfhover ul {/ * lists
嵌套在悬停列表项目下* /
左：auto;
}
#content {
margin-left：12em;
}
< / style>
The style sheet shown below is from the suckerfish vertical menu.
http://www.htmldog.com/articles/suck.../vertical.html
I''ve added in a few minor changes to color code the levels.
I changed the width of the first level to 8em and get an unwanted space
between that and the 2nd level.
I''d like their to be no gap between the levels when I change the widths.
What''s to change to do this?
Also, I do not understand the reason for "left: - 999em" in one definition.
However, changing the value came up with some interesting results.
<style type="text/css">
body {
font-family: arial, helvetica, serif;
}
#nav, #nav ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
float : left;
width : 11em;
}
#nav li { /* all list items */
position : relative;
float : left;
line-height : 1.25em;
margin-bottom : -1px;
width: 11em;
}
#nav li ul { /* second-level lists */
position : absolute;
left: -999em;
margin-left : 11.05em;
margin-top : -1.35em;
}
#nav li ul ul { /* third-and-above-level lists */
left: -999em;
}
#nav li a {
width: 8em;
display : block;
color : black;
font-weight : bold;
text-decoration : none;
background-color : #FAA;
border : 1px solid black;
padding : 0 0.5em;
}
#nav li li a {
width: 8em;
w\idth : 10em;
display : block;
color : black;
font-weight : bold;
text-decoration : none;
background-color : #0F0;
border : 1px solid black;
padding : 0 0.5em;
}
#nav li li li a {
width: 11em;
w\idth : 10em;
display : block;
color : black;
font-weight : bold;
text-decoration : none;
background-color : #DDF;
border : 1px solid black;
padding : 0 0.5em;
}
#nav li a:hover {
color : white;
background-color : black;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav
li.sfhover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav
li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { /* lists
nested under hovered list items */
left: auto;
}
#content {
margin-left : 12em;
}
</style>
推荐答案
" Richard" <安******* @ 127.001>写道：
"Richard" <An*******@127.001> wrote:
下面显示的样式表来自suckerfish垂直菜单。
http://www.htmldog.com/articles/suck.../vertical.html
我添加了一些颜色代码级别的细微更改。
我将第一级的宽度更改为8em并在第二级之间获得了不需要的空间。
当我改变宽度时，我希望它们之间没有差距。
要做什么改变呢？
如果你改变了较高级别的宽度，你还必须更改较低级别的
margin-left以匹配。
#nav，＃nav ul {/ *所有列表* /
宽度：11em;
}
因此当您更改上述内容时，您必须更改以下内容：
#nav li ul {/ *二级列表* /
margin-left：11.05em;
}
另外，我不明白左： - 999em的原因。在一个定义中。
但是，改变价值会产生一些有趣的结果。
#nav li：hover ul ul，＃nav li：hover ul ul ul，＃nav li.sfhover ul ul，＃nav
li.sfhover ul ul ul {
left：-999em ;
}
The style sheet shown below is from the suckerfish vertical menu.
http://www.htmldog.com/articles/suck.../vertical.html
I''ve added in a few minor changes to color code the levels.
I changed the width of the first level to 8em and get an unwanted space
between that and the 2nd level.
I''d like their to be no gap between the levels when I change the widths.
What''s to change to do this?
If you change the width of the upper levels you must also change the
margin-left of the lower levels to match.
#nav, #nav ul { /* all lists */
width : 11em;
}
So when you change the above, you must change the following to match:
#nav li ul { /* second-level lists */
margin-left : 11.05em;
}
Also, I do not understand the reason for "left: - 999em" in one definition.
However, changing the value came up with some interesting results. #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav
li.sfhover ul ul ul {
left: -999em;
}
而不是使用display：none隐藏较低级别此菜单
将它们放在边缘屏幕，然后根据需要将它们带到
。这样做的好处是它们总是显示菜单项
，因此屏幕总是可以访问
读者等。
史蒂夫
-
我的理论给你起见，我的异端邪说激怒你，
我从不回信，你不喜欢我的领带。 - 医生
Steve Pugh< st *** @ pugh.net> < http://steve.pugh.net/>
Instead of using display: none to hide the lower levels this menu
positions them way off the edge of the screen and then brings them on
as needed. The advantage to doing it this way is that they menu items
are always displayed and thus will always be accessible to screen
readers and the like.
Steve
--
"My theories appal you, my heresies outrage you,
I never answer letters and you don''t like my tie." - The Doctor
Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>
2005年3月3日星期四17:36:29 +0000 Steve Pugh写道：
On Thu, 03 Mar 2005 17:36:29 +0000 Steve Pugh wrote:
" Richard" <安******* @ 127.001>写道：
"Richard" <An*******@127.001> wrote:
下面显示的样式表来自suckerfish垂直菜单。
http://www.htmldog.com/articles/suck.../vertical.html
我添加了一些颜色代码级别的细微更改。
我将第一级的宽度更改为8em并在第二级之间获得了不需要的空间。
当我改变宽度时，我希望它们之间没有间隙。
要做什么改变？
The style sheet shown below is from the suckerfish vertical menu.
http://www.htmldog.com/articles/suck.../vertical.html
I''ve added in a few minor changes to color code the levels.
I changed the width of the first level to 8em and get an unwanted space
between that and the 2nd level.
I''d like their to be no gap between the levels when I change the widths.
What''s to change to do this?
如果你改变宽度在较高级别你还必须改变较低级别的左边缘以匹配。
If you change the width of the upper levels you must also change the
margin-left of the lower levels to match.
#nav，#nav ul {/ *所有列表* /
width：11em;
}
#nav, #nav ul { /* all lists */
width : 11em;
}
因此，当您更改以上内容时，必须更改以下内容以匹配：
So when you change the above, you must change the following to match:
#nav li ul {/ * second-le vel列表* /
margin-left：11.05em;
}
#nav li ul { /* second-level lists */
margin-left : 11.05em;
}
另外，我不明白的原因 ;左： - 999em"在一个定义中。但是，更改值会产生一些有趣的结果。
Also, I do not understand the reason for "left: - 999em" in one
definition. However, changing the value came up with some interesting
results.
#nav li：hover ul ul，＃nav li：hover ul ul ul，＃ nav li.sfhover ul ul，#nav
li.sfhover ul ul ul {
left：-999em;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav
li.sfhover ul ul ul {
left: -999em;
}
而不是使用显示：无法隐藏较低级别此菜单
将它们放在屏幕边缘，然后根据需要将它们带到
。这样做的好处是，它们总是显示菜单项
，因此屏幕上的读者等都可以访问。
史蒂夫
Instead of using display: none to hide the lower levels this menu
positions them way off the edge of the screen and then brings them on
as needed. The advantage to doing it this way is that they menu items
are always displayed and thus will always be accessible to screen
readers and the like.
Steve
现在搞定了。
任何设置宽度的方法都可以根据需要进行扩展？
设置为自动对列表造成严重破坏。
Got that worked out now.
Any way to set the width so that it will expand as needed?
Setting to auto plays havoc with the listings.
Steve Pugh写道：
[snip]
Steve Pugh wrote:
[snip]
这样做的好处是，它们的菜单项始终显示，因此屏幕上的读者可以随时访问。
The advantage to doing it this way is that they menu items are
always displayed and thus will always be accessible to screen
readers and the like.
限制适当的隐藏到屏幕上是不是更明智
（可能还有投影）媒体类型，允许其他人看到物品
通常。
迈克
-
Michael Winter
替换.invalid与.uk通过电子邮件回复。
Wouldn''t it just be more sensible to limit proper hiding to the screen
(and possibly projection) media type, allowing others to see the items
normally.
Mike
--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.
这篇关于在suckerfish菜单中更改的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
