html导航条设置如何使本页导航按钮始终保持为鼠标指针经过时的样式？

html导航条设置如何使本页导航按钮始终保持为鼠标指针经过时的样式？

img

img

问题相关代码，请勿粘贴截图
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<title>北京市科技进修学院</title>
<link rel=stylesheet type=text/css href="css/style.css">
<style>
 body{
    background-color: #FFFFFF;
  }
  .menu {                  /* 定义类选择符.menu的整体样式 */
    
    position:relative;
/*      相对定位，调整导航条位置*/
      top:27px;right:auto;bottom:auto;left:40px;
    text-align:center;
    vertical-align:middle;
    font-family:微软雅黑;
    font-size:1.4em;
    font-weight: bold;
    
  }
  .menu ul {          /* 用文本列表制作导航栏的整体样式 */
    list-style-type:none;    /* 不显示项目符号 */
    margin:0px;       /* 设置内外边距很重要，确定显示位置 */
    padding:0px;
  }
  .menu li {            /* 设置列表项的样式 */
    border-bottom:1px solid #CCCCCC;  /* 利用下边框做出
                                                                         分割线效果 */
width:auto;
float:left;
  }
  .menu li a{          /* 设置列表项的超链接整体样式 */
    display:block;       /* 设置列表项为块级元素 */
    height:1.5em;
    width:3em;
    padding:auto;
    text-decoration:none;       /* 去掉下划线 */
  }
.menu li a:link, .menu li a:visited{     /* 设置超链接未访问、
                                                                       已访问的显示效果 */
    background-color: #C1C9D1;         /* 设置列表项背景色 */
    color:#000000;                                /* 设置列表项文字颜色 */
    border-left:15px solid #103D5F;     /* 使用左边框设置
                                                             显示出对比效果 */    
  }
  .menu li a:hover{  /* 设置鼠标指针经过列表项时的样式，形成反差 */
    background-color: #103D5F;       /* 改变列表背景色 */
    color: #FFFFFF;                               /* 改变文字颜色 */
    border-left:15px solid  #C1C9D1;    /* 改变列表项左边框的颜色 */
  }
/*内部样式高亮显示失败*/
  
 </style>
</head>

<body>
<div id="all">
  <div id="top">
    <table >   <!--        列个一行表格-->
      <tr>
        <td ><img src="images/logo.jpg" width="395" height="81" border="0" /></a></td>  <!--        删除了logo超链接回首页的功能-->
    
    <td>  <div class="menu">
<ul>
    <li><a href="index.html" style=".menu li a:link, .menu li a:visited{     
                                                                       
    background-color: #103D5F;      
    color:#FFFFFF;                               
    border-left:15px solid #C1C9D1;  
  }">首页</a></li>
    <li><a href="jianjie.html">简介</a></li>
    <li><a href="xinwen.html">新闻</a></li>
    <li><a href="dongtai.html">动态</a></li>
    <li><a href="zhuanye.html">专业</a></li>
    <li><a href="jiuye.html">就业</a></li>
    <li><a href="liuyan.html">留言</a></li>
</ul>
</div>
        </td>
      </tr>
    </table>
  </div>
</body>
</html>
运行结果及报错内容

img

我的解答思路和尝试过的方法

1.内部样式：尝试在head里style menu栏添加新的id选择符设置其背景颜色等属性，然后在body里每页单独引用，但会新建一个元素容器或者与其他容器（文字按扭位置等属性不统一）；
2.外联样式：尝试在body里每一个

  • 内部加入内联样式单独定义，但无效果

    我想要达到的结果

    使导航条内本页导航按钮始终保持为鼠标指针经过时的样式，注：只能使用css和div的内容，无法使用JavaScript的函数

应该没人能听懂你的问题描述吧。

不太清楚你要什么样子；
你可以自己参考修改：
http://c.biancheng.net/css3/cursor.html