实现导航栏问题

Question

所以我有this 用materialize制作的导航栏

我的代码是：

<nav class="light-blue lighten-1 " role="navigation">
    <div class="nav-wrapper container "><a id="logo-container" href="#" class="brand-logo">Treasure Hunt</a>

        <ul id="navbarUl" class="right hide-on-med-and-down">
            <li class="active"><a href="#">Misiuni</a></li>
            <li><a href="#">NewsFeed</a></li>
            <li><a href="#">Clasament</a></li>
            <li><a href="#">  </a></li>
            <li id="navbarLi"> 
                <div class="row">
                    <div class="col s6"><a id="navbarImg" href="#"><img src="img/asd.jpg" class="circle responsive-img small"/></a></div>
                    <div class="col s6">Adyzds</div>






                </div>
            </li>

            <li >
                <div class="row">


                    <div class="col s4"><a href="#">Level:</a>
                        <span>Value</span>
                    </div>
                    <div class="col s4"><a href="#">XP:</a>
                        <span>Value</span>
                    </div>


                </div>
            </li>

        </ul>
    </div>
</nav>

我的鼠标悬停在头像上。我也希望悬停效果能够覆盖名称。另外，我希望 Level 值接近 Level。谁能帮帮我？

CSS:

 .icon-block {
  padding: 0 15px;
}
.icon-block .material-icons {
    font-size: inherit;
}
#navbarImg{
    padding-top: 10px;
    max-width: 70px;
    max-height: 64px;
}
#navbarLi{
    max-height: 64px;
}

Answer 1

对于级别：+ 值，您的列太窄。不要在内部创建一个包含 2 列的行，而是尝试对每个列使用单独的 <li>：

<li >
   <a href="#">Level: <span>7</span> </a>
</li>    
<li>
   <a href="#">XP:<span>105</span> </a>
</li>

至于你的名字，只要将它嵌套在一个 <a> 元素中，materialize 就会知道如何处理它。

看看这个 fiddle：https://jsfiddle.net/pwxa6e80/3/ ...希望对您有所帮助 :)

实现导航栏问题

Materialize nav bar issue

html

css

materialize