最简单 导航栏 html css

dhl.html

html>
<html>
    <head>
        <meta charset="utf-8">
        <title>导航栏title>
        <link type="text/css" rel="stylesheet" href="css/dhl.css">
    head>
    <div class="dhl">
        <ul>
            <li><a href="">首页a>li>
            <li><a href="">番剧a>li>
            <li><a href="">直播a>li>
            <li><a href="">游戏中心a>li>
            <li><a href="">会员a>li>
        ul>
    div>
html>

dhl.css

.dhl ul
{
	margin-bottom: 30px;
	padding: 0px;
	width: 600px;
	height: 30px;
}
.dhl ul li
{
	height: 30px;
	width: 16.45%;
	list-style: none;
	float: left;
	display: block;
	font: "微软雅黑";
}
 
.dhl ul li a
{
	text-align: center;
	color: black;
	font-size: larger;
	text-decoration: none;
	background-color: white;
	line-height: 40px;
}
.dhl ul a:hover
{
	color: rgb(0,0,0);
	background-color: #00FFFF;
}

运行后

划过导航栏背景变色