带有下拉菜单的最小CSS选项卡栏 [英] Minimal CSS tab bar with drop-down menus

问题描述

我正在试图找出什么是最简单的最简单的CSS我可以
必须完成一行标签，一个或多个标签有一个

掉落 - 当你将鼠标悬停在菜单上时 - 和整个标签+菜单

标记必须只包含嵌套的无序列表。


我不在乎如果悬停下拉部分无法在IE中运行 - 如果

没有，那么选项卡仍然是可点击的链接，无论如何都会加载具有

子菜单选项的页面。我*关心标签显示

所有浏览器都没有黑客一致。


这是我的尝试，这花费了数小时的尴尬通过在研究CSS2

规格时（以及在网上发现许多令人不满意的例子后）尝试不同的东西来解决这个问题：

< a rel =nofollowhref =http://sunshine.rahul.net/~unicorn/menutest.html\"target =_ blank> http://sunshine.rahul.net/~unicorn/menutest.html


所有CSS和HTML都在页面源中。该页面解释了我的规格和

问问题。


我想弄清楚所需的最小定义所以我可以

了解CSS（我认为自己是CSS的新手）。


-A

I am trying to figure out what is the minimal simplest CSS I can
have to accomplish a row of tabs, with one or more tabs having a
drop-down menu when you hover over it -- AND the whole tab+menu
markup must consist of only nested unordered lists.

I don''t care if the hover-dropdown part fails to works in IE -- if
not, the tabs are still clickable links that load a page having the
submenu choices on it anyway. I *do* care that the tabs appear
consistent accross all browsers without hacks.

Here''s my attempt, which took an embarrasing number of hours to
figure out by trying out different things while studying the CSS2
specs (and after finding many unsatisfactory examples on the web):

http://sunshine.rahul.net/~unicorn/menutest.html

All CSS and HTML is in the page source. The page explains my specs and
asks questions.

I''m trying to figure out the minimal definition required so I can
understand CSS (I consider myself a newbie at CSS).

-A

推荐答案

On 2006年5月10日星期三22:16:58 +0000（UTC）axlq< ax ** @ spamcop.net>写道：


|我想弄清楚什么是最小的最简单的CSS我可以

|必须完成一行选项卡，其中一个或多个选项卡具有

|当您将鼠标悬停在它上面时的下拉菜单 - 以及整个标签+菜单

|标记必须只包含嵌套的无序列表。

|

|我不在乎悬停下拉部分是否无法在IE中运行 - 如果

|不是，标签仍然是可点击的链接，加载了具有

|的页面无论如何，子菜单选择。我*关心标签出现

|所有浏览器都没有黑客的一致性。

|

|这是我的尝试，这需要花费数小时的时间才能获得
|通过在学习CSS2时尝试不同的东西来弄明白

|规格（以及在网上发现许多令人不满意的例子后）：


我打赌这是一种常见的体验。

| http://sunshine.rahul.net/~unicorn/menutest.html

|

|所有CSS和HTML都在页面源中。该页面解释了我的规格和

|问问题。


该标签对我来说没问题，因为该页面下没有边框，

例如第一个标签。带有下拉菜单的第二个标签看起来像

，如果左边有点太远了。否则它看起来没问题。


这就是我在Linux上的Firefox 1.5.0.3如何呈现它。第二个PNG已经激活了下拉菜单。

http://phil.ipal.org/usenet/ciwas/20...menutest-1.png
http：/ /phil.ipal.org/usenet/ciwas/20...menutest-2.png

|我正在试图找出所需的最小定义，所以我可以

|了解CSS（我认为自己是CSS的新手）。


你并不孤单。


-

----------------------------------------------- ------------------------------

| Phil Howard KA9WGN | http://linuxhomepage.com/ http://ham.org/ |

| （名字）在ipal.net | http://phil.ipal.org/ http://ka9wgn.ham.org/ |

--------- -------------------------------------------------- ------------------

On Wed, 10 May 2006 22:16:58 +0000 (UTC) axlq <ax**@spamcop.net> wrote:

| I am trying to figure out what is the minimal simplest CSS I can
| have to accomplish a row of tabs, with one or more tabs having a
| drop-down menu when you hover over it -- AND the whole tab+menu
| markup must consist of only nested unordered lists.
|
| I don''t care if the hover-dropdown part fails to works in IE -- if
| not, the tabs are still clickable links that load a page having the
| submenu choices on it anyway. I *do* care that the tabs appear
| consistent accross all browsers without hacks.
|
| Here''s my attempt, which took an embarrasing number of hours to
| figure out by trying out different things while studying the CSS2
| specs (and after finding many unsatisfactory examples on the web):

I bet this is a common experience.
| http://sunshine.rahul.net/~unicorn/menutest.html
|
| All CSS and HTML is in the page source. The page explains my specs and
| asks questions.

The tab looks OK to me as there is no border under the one for that page,
e.g. the first tab. The 2nd tab with the drop down menu looks to me as
if it is to the left a bit too far. Otherwise it looks OK.

Here''s how my Firefox 1.5.0.3 on Linux renders it. The 2nd PNG has the
2nd tab activated for drop down.

http://phil.ipal.org/usenet/ciwas/20...menutest-1.png
http://phil.ipal.org/usenet/ciwas/20...menutest-2.png
| I''m trying to figure out the minimal definition required so I can
| understand CSS (I consider myself a newbie at CSS).

You''re not alone.

--
-----------------------------------------------------------------------------
| Phil Howard KA9WGN | http://linuxhomepage.com/ http://ham.org/ |
| (first name) at ipal.net | http://phil.ipal.org/ http://ka9wgn.ham.org/ |
-----------------------------------------------------------------------------

文章< e3 ********* @ news4。 newsguy.com>，< ph ************** @ ipal.net>写道：

In article <e3*********@news4.newsguy.com>, <ph**************@ipal.net> wrote:

2006年5月10日星期三22:16:58 +0000（UTC）axlq< ax ** @ spamcop.net>写道：
|这是我的尝试，这需要花费数小时才能完成
|通过在学习CSS2时尝试不同的东西来弄清楚
|规格（以及在网上发现许多令人不满意的例子后）：

我敢打赌，这是一种常见的体验。


:)这对我来说很常见，这是肯定的！

| http://sunshine.rahul.net/~unicorn/menutest.html

标签看起来没问题，因为该页面下没有边框，
例如第一个标签。带有下拉菜单的第二个选项卡对我来说是
如果它在左边有点太远了。否则它看起来不错。


下拉部分总是出现在左边的一点点Firefox和/或
和Opera（如果我更改CSS以强制子菜单，还会显示IE）到

出现）。我不知道为什么。我没有在

all中指定位置;我只是让位置落在它想要的位置（默认值

应该在父元素下面，这是

这个案例中的第二个标签）。我对这个定位很满意。

这就是我在Linux上使用Firefox 1.5.0.3的方式。第二个PNG已激活第二个选项卡以便下拉。

http://phil.ipal.org/usenet/ciwas/20...menutest-1.png
< a rel =nofollowhref =http://phil.ipal.org/usenet/ciwas/2006-05-10/unicorn-menutest-2.pngtarget =_ blank> http：//phil.ipal .org / usenet / ciwas / 20 ... menutest-2.png

On Wed, 10 May 2006 22:16:58 +0000 (UTC) axlq <ax**@spamcop.net> wrote:
| Here''s my attempt, which took an embarrasing number of hours to
| figure out by trying out different things while studying the CSS2
| specs (and after finding many unsatisfactory examples on the web):

I bet this is a common experience.
:) It''s common for me, that''s for sure!
| http://sunshine.rahul.net/~unicorn/menutest.html

The tab looks OK to me as there is no border under the one for that page,
e.g. the first tab. The 2nd tab with the drop down menu looks to me as
if it is to the left a bit too far. Otherwise it looks OK.
The drop-down part always appears to the left a bit in both Firefox
and Opera (and also IE if I change the CSS to force the submenu to
show up). I don''t know why. I''m not specifying the position at
all; I''m just letting the position fall where it wants (the default
should be right under the parent element, which is the 2nd tab in
this case). I''m OK with the positioning though.
Here''s how my Firefox 1.5.0.3 on Linux renders it. The 2nd PNG has the
2nd tab activated for drop down.

http://phil.ipal.org/usenet/ciwas/20...menutest-1.png
http://phil.ipal.org/usenet/ciwas/20...menutest-2.png

这很奇怪。您的Firefox正确呈现它。我的firefox引发了一个像素太高的标签，因此第一个标签下的边框不会被擦除，并且其他标签下面有两个边框：

http：//sunshine.rahul .net / ~unicorn / menutest-firefox.png


我正在使用Firefox 1.5.0.3和开箱即用的默认设置。 />
你为了让它正常工作了吗？


-A

That''s odd. Your Firefox renders it properly. MY firefox raises
the tabs 1 pixel too high, so the border under the first tab doesn''t
get erased, and there are two borders under the other tabs:

http://sunshine.rahul.net/~unicorn/menutest-firefox.png

I''m using Firefox 1.5.0.3 with the out-of-the-box default settings.
Did you do something to yours to make it work correctly?

-A

On Thu， 2006年5月11日12:39:15 +0000（UTC）axlq< ax ** @ spamcop.net>写道：

|在文章< e3 ********* @ news4.newsguy.com>，< ph ************** @ ipal.net>写道：

|> 2006年5月10日星期三22:16:58 +0000（UTC）axlq< ax ** @ spamcop.net>写道：

|> |这是我的尝试，这花费了数小时的尴尬时间

|> |通过在学习CSS2时尝试不同的东西来弄明白

|> |规格（以及在网上发现许多令人不满意的例子后）：

|>

|>我打赌这是一种常见的体验。

|

| :)这对我来说很常见，这是肯定的！


似乎很多人遇到很多这样的事情。

他们描述了他们想要的东西，他们得到的答案是

停止想要那个。

|> | http://sunshine.rahul.net/~unicorn/menutest.html

|>

|>标签对我来说没问题，因为该页面下没有边框，

|>例如第一个标签。带有下拉菜单的第二个标签看起来像是

|>如果它在左边有点太远了。否则它看起来不错。

|

| Firefox下面的下拉部分总是出现在左边。

|显示）。我不知道为什么。我不是在

|中指定位置所有;我只是让位置落到它想要的位置（默认

|应该在父元素下面，这是

中的第二个标签|本例） 。我对定位很满意。


我想知道如果带有下拉的标签一直是什么的话它会怎么做

到左边边缘。

|>这就是我在Linux上的Firefox 1.5.0.3呈现它的方式。第二个PNG的下拉菜单已激活

|>第二个标签。

|>

|> http://phil.ipal.org/usenet /ciwas/20...menutest-1.png

|> http://phil.ipal.org/usenet/ciwas/20...menutest-2.png

|

|那很奇怪。您的Firefox正确呈现它。我的firefox加注

|标签1像素太高，所以第一个标签下的边框不是
|被擦除，其他标签下有两个边框：

|

| http://sunshine.rahul.net/~unicorn/menutest- firefox.png

|

|我正在使用Firefox 1.5.0.3和开箱即用的默认设置。

|你为自己做了什么让它工作正常吗？


我的用户代理讲述了故事的一部分：


Mozilla / 5.0（X11; U; Linux i686; en-US; rv：1.8）Gecko / 20051130 Ubuntu / 1.4.99 + 1.5rc3.dfsg-1ubuntu3 Firefox / 1.5


它''实际上在Slackware 10.2和内核2.6.16上运行。有时我会想知道Firefox使用的底层图形工具包（例如GTK）

对显示错误有什么影响。


-

---------------------------------------- -------------------------------------

| Phil Howard KA9WGN | http://linuxhomepage.com/ http://ham.org/ |

| （名字）在ipal.net | http://phil.ipal.org/ http://ka9wgn.ham.org/ |

--------- -------------------------------------------------- ------------------

On Thu, 11 May 2006 12:39:15 +0000 (UTC) axlq <ax**@spamcop.net> wrote:
| In article <e3*********@news4.newsguy.com>, <ph**************@ipal.net> wrote:
|>On Wed, 10 May 2006 22:16:58 +0000 (UTC) axlq <ax**@spamcop.net> wrote:
|>| Here''s my attempt, which took an embarrasing number of hours to
|>| figure out by trying out different things while studying the CSS2
|>| specs (and after finding many unsatisfactory examples on the web):
|>
|>I bet this is a common experience.
|
| :) It''s common for me, that''s for sure!

Seems a lot of people are running into lots of things like this.
They describe what they do want, and some answers they get are
"stop wanting that".
|>| http://sunshine.rahul.net/~unicorn/menutest.html
|>
|>The tab looks OK to me as there is no border under the one for that page,
|>e.g. the first tab. The 2nd tab with the drop down menu looks to me as
|>if it is to the left a bit too far. Otherwise it looks OK.
|
| The drop-down part always appears to the left a bit in both Firefox
| and Opera (and also IE if I change the CSS to force the submenu to
| show up). I don''t know why. I''m not specifying the position at
| all; I''m just letting the position fall where it wants (the default
| should be right under the parent element, which is the 2nd tab in
| this case). I''m OK with the positioning though.

I wonder what it would do if the tab with a drop down was all the way
to the left edge.
|>Here''s how my Firefox 1.5.0.3 on Linux renders it. The 2nd PNG has the
|>2nd tab activated for drop down.
|>
|>http://phil.ipal.org/usenet/ciwas/20...menutest-1.png
|>http://phil.ipal.org/usenet/ciwas/20...menutest-2.png
|
| That''s odd. Your Firefox renders it properly. MY firefox raises
| the tabs 1 pixel too high, so the border under the first tab doesn''t
| get erased, and there are two borders under the other tabs:
|
| http://sunshine.rahul.net/~unicorn/menutest-firefox.png
|
| I''m using Firefox 1.5.0.3 with the out-of-the-box default settings.
| Did you do something to yours to make it work correctly?

The user-agent for mine tells part of the story:

Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.8) Gecko/20051130 Ubuntu/1.4.99+1.5rc3.dfsg-1ubuntu3 Firefox/1.5

It''s actually running on Slackware 10.2 and kernel 2.6.16. Sometimes I
wonder if the underlying graphical toolkits Firefox uses (e.g. GTK here)
have any impact on display bugs.

--
-----------------------------------------------------------------------------
| Phil Howard KA9WGN | http://linuxhomepage.com/ http://ham.org/ |
| (first name) at ipal.net | http://phil.ipal.org/ http://ka9wgn.ham.org/ |
-----------------------------------------------------------------------------

这篇关于带有下拉菜单的最小CSS选项卡栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！