你能看得懂的二级水平导航菜单教程~v~

你能看得懂的二级水平导航菜单教程~v~

  • 1.先布局HTML
    • 2.CSS样式实现
      • 3.全部代码
        • 4.小结

你能看得懂的二级水平导航菜单教程~v~_第1张图片

1.先布局HTML

html代码如下:

<ul>
		<li><a href="">首页a>li>
		<li><a href="">课程a>
			<ul>
				<li><a href="">语文a>li>
				<li><a href="">数学a>li>
				<li><a href="">英语a>li>
				<li><a href="">政治a>li>
			ul>
		li>
		<li><a href="">活动a>
			<ul>
				<li><a href="">读书a>li>
				<li><a href="">睡觉a>li>
				<li><a href="">睡觉a>li>
				<li><a href="">游戏a>li>
			ul>
		li>
		<li><a href="">生活a>
			<ul>
				<li><a href="">好好学习a>li>
				<li><a href="">Do it !a>li>
			ul>
		li>
	ul>

效果图如下:
你能看得懂的二级水平导航菜单教程~v~_第2张图片

2.CSS样式实现

代码如下:

ul{
			margin: 0;
			padding: 0px;

		}
		ul li{
			height: 30px;
			width:115px;
			list-style:none;
			float:left;
			display:inline;
			text-align:center;
			font:0.9em Arial, Helvetica, sans-serif;
		}
		ul li a {
			color:#fff;
			width:113px;
			margin:0px;
			padding:0px 0px 0px 8px;
			text-decoration:none;
			display:block;
			background:pink;
			line-height:29px;
			border-right:1px solid green;
			border-bottom:1px solid green;
		}
		ul li ul li{
			height:25px;
		}
		ul li ul li a{
			background:pink;
			line-height:24px;
		}
		ul li a:hover{
            background:yellow;
            border-bottom:1px dashed #ff0000;
		}
        ul li ul{
        	visibility:hidden;
        }
        ul li:hover ul{
        	visibility:visible;
        }
        ul li ul li a:hover{
        	background:pink;
        }

效果图如下:

你能看得懂的二级水平导航菜单教程~v~_第3张图片

3.全部代码


<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Documenttitle>
	<style type="text/css">
		ul{
			margin: 0;
			padding: 0px;

		}
		ul li{
			height: 30px;
			width:115px;
			list-style:none;
			float:left;
			display:inline;
			text-align:center;
			font:0.9em Arial, Helvetica, sans-serif;
		}
		ul li a {
			color:#fff;
			width:113px;
			margin:0px;
			padding:0px 0px 0px 8px;
			text-decoration:none;
			display:block;
			background:pink;
			line-height:29px;
			border-right:1px solid green;
			border-bottom:1px solid green;
		}
		ul li ul li{
			height:25px;
		}
		ul li ul li a{
			background:pink;
			line-height:24px;
		}
		ul li a:hover{
            background:yellow;
            border-bottom:1px dashed #ff0000;
		}
        ul li ul{
        	visibility:hidden;
        }
        ul li:hover ul{
        	visibility:visible;
        }
        ul li ul li a:hover{
        	background:pink;
        }
	style>
head>
<body>
	<ul>
		<li><a href="">首页a>li>
		<li><a href="">课程a>
			<ul>
				<li><a href="">语文a>li>
				<li><a href="">数学a>li>
				<li><a href="">英语a>li>
				<li><a href="">政治a>li>
			ul>
		li>
		<li><a href="">活动a>
			<ul>
				<li><a href="">读书a>li>
				<li><a href="">睡觉a>li>
				<li><a href="">睡觉a>li>
				<li><a href="">游戏a>li>
			ul>
		li>
		<li><a href="">生活a>
			<ul>
				<li><a href="">好好学习a>li>
				<li><a href="">Do it !a>li>
			ul>
		li>
	ul>
body>
html>

4.小结

要熟记常用的样式。
干就对了!
Do it !

你可能感兴趣的:(Web,1024程序员节,css,html)