html+ul secondary, UL LI structure to achieve secondary navigation menu (HTML+CSS+JS) |

1.

Create an unordered list:

• Menu example 1
• Menu example two
• Menu example three
• Menu example four
• Menu example five
• Menu example six

2. Hide the "li" default style "dot" with CSS:

.ullicss ul{list-style:none;}

• Menu example 1
• Menu example two
• Menu example three
• Menu example four
• Menu example five
• Menu example six

3. Arrange the "li" element horizontally by floating:

.ullicss ul{list-style:none;}

.ullicss li{float:left;}

• Menu example 1
• Menu example two
• Menu example three
• Menu example four
• Menu example five
• Menu example six

4. Adjust the width of the "li" element:

.ullicss ul{list-style:none;}

.ullicss li{float:left;width:100px;}

• Menu example 1
• Menu example two
• Menu example three
• Menu example four
• Menu example five
• Menu example six

5. Set menu effects through CSS pseudo-classes:

.ullicss ul{list-style:none;}

.ullicss li{float:left; width:100px;}

.ullicss a:link   {color:pink; font-weight:bold; text-decoration:none; background:green;}

.ullicss a:visited{color:pink; font-weight:bold; text-decoration:none; background:green;}

.ullicss a:hover  {color:green; font-weight:bold; text-decoration:none; background:yellow;}

• Menu example 1
• Menu example two
• Menu example three
• Menu example four
• Menu example five
• Menu example six

【Click here to see the effect】(Hint: put the mouse on the menu to see it)

6. Display the link as a block-level element and fine-tune it:

.ullicss ul{list-style:none;}

.ullicss li{float:left; width:100px; margin-left:3px; line-height:30px;}

.ullicss a:link   {color:pink; font-weight:bold; text-decoration:none; background:green;}

.ullicss a:visited{color:pink; font-weight:bold; text-decoration:none; background:green;}

.ullicss a:hover  {color:green; font-weight:bold; text-decoration:none; background:yellow;}

.ullicss a  {display:block; text-align:center; height:30px;}

• Menu example 1
• Menu example two
• Menu example three
• Menu example four
• Menu example five
• Menu example six

CSS tweaks explained:

text-align:center: Center the menu text;

height: 30px: increase the height of the background;

margin-left: 3px: make each menu empty 3px distance;

line-height: 30px: Defines the line height to center the link text vertically

7.    进一步调整：

.ullicss {height:30px;background:green;}

.ullicss ul{list-style:none;}

.ullicss li{float:left; width:100px; margin-left:3px; line-height:30px;}

.ullicss a:link   {color:pink; font-weight:bold; text-decoration:none; background:green;}

.ullicss a:visited{color:pink; font-weight:bold; text-decoration:none; background:green;}

.ullicss a:hover  {color:green; font-weight:bold; text-decoration:none; background:yellow;}

.ullicss a  {display:block; text-align:center; height:30px;}

• 菜单例一
• 菜单例二
• 菜单例三
• 菜单例四
• 菜单例五
• 菜单例六

(版权归

【小

结】

本例子通过将无序列表浮动并加以修饰得到一个横向导航菜单。

【留个思考题】

如果将遇到的将CSS中的“background”和“color”用“background-image”代替是不是会得到更好的效果呢？

如果图片利用合理，你会创造出更好的导航菜单！这里请读者自己动手实践吧！

【附录1： 本文用到的相关示例代码下载】

【附录2：

相关知识参考】

无序列表   ：http://www.w3school.com.cn/html/html_lists.asp

CSS列表   ：http://www.w3school.com.cn/css/css_list.asp

CSS浮动   ：http://www.w3school.com.cn/css/css_positioning_floating.asp

CSS背景   ：http://www.w3school.com.cn/css/css_background.asp

CSS文本   ：http://www.w3school.com.cn/css/css_text.asp

CSS伪类   ：http://www.w3school.com.cn/css/css_pseudo_classes.asp

CSS display 属性 ：http://www.w3school.com.cn/css/pr_class_display.asp

CSS完整教程       ：http://www.w3school.com.cn/css/index.asp

HTML完整教程     ：http://www.w3school.com.cn/html/index.asp

改善网站导航文章，有兴趣的话阅读：