Question

我正在尝试在页面左侧创建一个垂直侧导航栏，它看起来像这样：

http://i.imgur.com/Brp4fJT.png

我怎样才能让导航栏拥有那个空间和风格？现在我左边有导航，我只需要那种背景。

jsfiddle - http://jsfiddle.net/gLpm9pr0/

<aside class="sidebar">
    <nav>
        <ul>
            <li><a href="">home</a></li>
            <li><a href="">about us</a></li>
            <li><a href="">orders</a></li>
            <li><a href="">gallery</a></li>
            <li><a href="">contact</a></li>
        </ul>
    </nav>
</aside>



.sidebar{
float:left;
margin:20px;
margin-right:150px;

}

nav ul li a{
text-decoration:none;
font-family:myriad pro;
font-size:20px;
color:#3d2316;

}

Answer 1

试试这个css：

.sidebar{
float:left;
margin:20px;
margin-right:150px;
}

nav ul li a{
text-decoration:none;
font-family:myriad pro;
font-size:18px;
color: white;  
}

nav ul li {
list-style-type: none;
padding-top: 1em;
padding-bottom: 1em;
padding-left: 4.0em;
padding-right: 1.0em;
border: 1px #CBAFA2 solid;
margin-bottom: 0.15em;
background-color: #CBAFA2;
}

nav ul li:hover {
background-color: #3D2316;
border-color: #3D2316;
}

要清除列表前面的项目符号，您需要更改导航文件，而不是导航文件。如果你想靠近，可以使用这些值。对于悬停时的箭头状结构，我会加载背景图像。不确定是否有其他解决方案。

Answer 2

您需要使用CSS属性：Background-image: url(imagepath.png)并设置图像的路径，就像您想要的那样。

试图制作一个导航栏

2 个答案: