Utiliser CSS pour développer une barre de navigation élégante Partie 2_Experience Exchange

解决方案

在一个导航系统中显示子菜单最好的办法是在一个列表中创建子列表。这样标记的两级导航栏很容易被理解 – 哪怕浏览器不支持CSS。

为了产生多级导航栏，我们创建一个嵌套的列表，为这些新的列表项样式化颜色、边界和链接属性：

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

content="text/html; charset=utf-8" />

• Recipes

  • Starters
  • Main Courses
  • Desserts

• Contact Us
• Articles
• Buy Online

#navigasi {

lebar: 200px;

}

#navigasi ul {

gaya senarai: tiada;

margin: 0;

lapik: 0;

}

#navigasi {

bahagian bawah sempadan: 1px pepejal #ED9F9F;

}

#navigation li a:link, #navigation li a:dilawati {

saiz fon: 90%;

paparan: blok;

lapik: 0.4em 0 0.4em 0.5em;

sempadan-kiri: 12px pepejal #711515;

sempadan-kanan: 1px pepejal #711515;

warna latar belakang: #B51032;

warna: #FFFFFF;

hiasan teks: tiada;

}

#navigasi li a:tuding {

warna latar belakang: #711515;

warna: #FFFFFF;

}

#navigasi ul ul {

margin-kiri: 12px;

}

#navigasi ul ul li {

bahagian bawah sempadan: 1px pepejal #711515;

margin:0;

}

#navigation ul ul a:link, #navigation ul ul a:dilawati {

warna latar belakang: #ED9F9F;

warna: #711515;

}

#navigasi ul ul a:tuding {

warna latar belakang: #711515;

warna: #FFFFFF;

}

 

增加这些以后的显示效果如图4。

图4. 包含子菜单的导航栏

讨论

嵌套列表是用来描述我们正在做的导航栏系统的好办法。第一个列表包一个列表包炫的导航栏系统。 🎜>Resipi下面的子列表显示了Resipi范围之内的子部分。即使没有任何CSS样式，列表的政理解，就象你在图 5看到的一样。

图

5：没有使用样式，包含子菜单的导航栏

• Resipi

  • Pemula
  • Kursus Utama
  • Pencuci mulut

• Hubungi Kami
• Artikel
• Beli Dalam Talian

用

HTML

，如果简单的使用本文前面的

CSS

，不做一的，不做作的，不做中单的显示将如图6。由于li元素继承主菜单的样式，子列表将呈现出主有的。 图6：采用默认样式表子菜单导航栏

为了让嵌套的列表呈现出它是一个子菜单而不是主导航栏一部出它是一个子菜单而不是主导航栏一部分的效果，为分的效果，为了式规则：

#navigasi ul ul {

margin-kiri: 12px;

}

这个规则将缩进嵌套列表，让它在主菜单的右边界对齐，象图

7

是明

图

7：带有缩进规则的导航栏

最后让我们给嵌套表里面的

li和

a

元素增加一些简单加一些简单单的样单🎜> #navigasi ul ul li {

bahagian bawah sempadan: 1px pepejal #711515;

margin: 0; }

#navigation ul ul a:link, #navigation ul ul a:dilawati {

warna latar belakang: #ED9F9F;

warna: #711515;

}

#navigasi ul ul a:tuding {

warna latar belakang: #711515;

warna: #FFFFFF;

}