我希望图像在

Question

我希望图像在悬停时显示在导航栏（矩形条）内。我在锚标记中添加了一个div元素，并在css中使用了div类来在元素悬停时进行调度。但是现在当我尝试使用下面的代码时，它不会按照我想要的方式发生

HTML CODE：

<nav class="navbar navbar-inverse" role="navigation">
    <div class="container">
        <div class="collapse navbar-collapse" id="navbar">
            <ul class="nav navbar-nav">
                <li><a href="#" class="home"><img src="images/home.png" alt="" class="hidden-xs"><span class="visible-xs">Home</span></a></li>
                <li><a href="#/create">
                        <div class="play">
                            <img src="images/Picture13.png" />
                        </div>
                        <img src="images/add-128.png" style="height:20px; width:20px;" /> Create Application
                    </a>
                </li>
            </ul>
        </div>
    </div>
</nav>

CSS代码：

.navbar{
    padding: 8px 0;
}
.navbar-nav > li{
    margin-right: 12px;
}
.navbar-nav > li > a,
.navbar-inverse .navbar-nav > li > a{
    background-color: #bcd6ed;
    border: 1px solid #bebebe;
    color: #000;
    font-size: 16px;
}
.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus {
    background-color: #fff;
    background-image: url('../images/Picture13.png');
    border-top: 2px solid #003052;
    border-right: 2px solid #003052;
    border-bottom: 2px solid #003052;
    border-left: 10px solid #003052;
    color: #003052;
}
.navbar-inverse .navbar-nav > li > a:hover .play{
    display: block;
}
.play{
    position: absolute;
    display: none;
    top: 0%; 
    width: 40px;
    margin: 0 auto;
    left: 0px;
    right: 100px;
    z-index: 100;
}