当我将鼠标悬停在导航栏上时如何让文本滑入？

Question

因此，当我将鼠标悬停在每个导航栏选项卡上时，我希望从右侧滑入一个栏，其中包含对悬停选项卡的描述。例如，如果我将鼠标悬停在 "Research," 上，一个栏会从右边滑入说 "Read about my current research." 我该怎么做？我可以严格使用 CSS3 吗？或者我需要 Javascript？我的代码如下：

HTML:

       <!DOCTYPE html>
       <html>
         <head>
           <title>Matthew H. Goodman</title>
           <link href="stylesheettabs.css" rel="stylesheet" type="text/css"/>
         </head>
         <body>
           <ul id="nav">
             <li><a href="web2home.html">HOME</a></li>
             <li><a href="web2cv.html">CV</a></li>
             <li><a href="#">RESEARCH</a></li>
             <li><a href="web2con.html">CONTACT</a></li>
           </ul>
         </body>
       </html>

CSS:

      #nav {
        padding:0px;
        margin-top: 200px;
        border-radius: 10px;
        left: 0;
        width: auto;
        position: absolute;
        height: auto;
        background-image: url("http://www.diiiz.com/variant/Argent%C3%A9.jpg"); 
        overflow: hidden;
      }

      #nav li {
        position: relative;
        list-style: none;
        width: auto;
        border-top: 1px solid black;
      }

      #nav li a {
        position: relative;
        display: block;
        text-decoration: none;
        font-size: 15px;
        font-weight: bold;
        color: white;
        text-align: center;
        padding: 15px;
      }

      #nav li:hover {
        background-color: black;
      }

      #nav li a:hover {
        color: #778899;
        display: block;
        padding: 15px;
      }

Answer 1

JSBIn

我 post jsbin.Here 上的演示是关键代码：

 #nav li span{
   transition: all 0.5s;
   position: absolute;
   top: 0;
   left: -300px;
   display: block;
   width: 300px;
   height: 100%;
   background: #69f;
   z-index: -1;
 }
      #nav li:hover span{
        left: 100px;
      }

当我将鼠标悬停在导航栏上时如何让文本滑入？

How to have text slide in when I hover over navbar?

css

animation

slide

navbar