我想在buycraft商店的左边做一个垂直菜单栏，但是我很遗憾不知道这个css，我很感激帮助。菜单栏应该类似于this
这将用于'Buycraft'商店页面。 我的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{ store.name }} | {{ page.title }}</title>
<link href="/templates/209/css/style.min.css" rel="stylesheet">
<link rel="shortcut icon" href="/templates/209/img/favicon.ico">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-36735942-3']);
_gaq.push(['_trackPageview']);
{% if store.googleAnalytics %}
_gaq.push(['b._setAccount', '{{ store.googleAnalytics }}']);
_gaq.push(['b._trackPageview']);
{% endif %}
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<style>{{ store.css|raw }}</style>
</head>
<body>
<div class="container">
<div class="header">
<div class="logo">
{% if store.logo %}
<a href="/"><img src="{{ store.logo }}" /></a>
{% else %}
<span>{{ store.name }}</span>
{% endif %}
</div>
<div class="buttons">
<div class="toolbar">
<div class="logout">
{% if basket.username %}
<a href="/checkout/logout" class="btn btn-danger">{{ lang("button.logout") }}</a>
{% endif %}
</div>
<div class="currency">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
{{ basket.currency }} <span class="fa fa-caret-down"></span>
</button>
<ul class="dropdown-menu" role="menu">
{% for currency in store.currencies %}
{% if currency.code in [store.currency, "AUD", "BRL", "CAD", "DKK", "EUR", "NOK", "NZD", "GBP", "SEK", "USD", "PLN"] %}
<li {% if basket.currency == currency.code %}class="active"{% endif %}>
<a href="?currency={{ currency.code }}">{{ currency.code }}</a>
</li>
{% endif %}
{% endfor %}
</ul>
</div>
<div class="basket">
{% if basket.packages|length > 0 %}
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
{{ lang("basket.count", basket.packages|length, basket.price|money, basket.currency) }} <span class="fa fa-caret-down"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
{% for package in basket.packages %}
<li class="item">
<div class="name">{{ package.name[:25] }}</div>
<div class="price">{{ package.price|money }} <small>{{ basket.currency }}</small></div>
<div class="remove"><a href="/checkout/packages/remove/{{ package.id }}"><span class="fa fa-times"</span></a></div>
</li>
{% endfor %}
<li class="checkout">
<div class="total"><b>{{ lang("basket.total") }}:</b> {{ basket.price|money }} <small>{{ basket.currency }}</small></div>
<div class="button"><a href="/checkout/basket" class="btn btn-success">Checkout</a></div>
</li>
</ul>
{% else %}
<a href="#" class="btn btn-info" disabled="disabled"><i class="icon-shopping-cart icon-white"></i> {{ lang("basket.count", 0, 0.00, basket.currency) }}</a>
{% endif %}
</div>
</div>
</div>
</div>
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">{{ store.name }}</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="{% if page.category == "index" %}active{% endif %}"><a href="/">{{ lang("category.home") }}</a></li>
{% for category in store.categories %}
{% if category.subcategories|length > 0 %}
<li class="dropdown {% if category.active %}active{% endif %}">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">{{ category.name }} <i class="fa fa-caret-down"></i></a>
<ul class="dropdown-menu">
{% for subcategory in category.subcategories %}
<li><a href="/category/{{ subcategory.id }}">{{ subcategory.name }}</a></li>
{% endfor %}
</ul>
{% else %}
<li class="{% if category.active %}active{% endif %}"><a href="/category/{{ category.id }}">{{ category.name }}</a></li>
{% endif %}
{% endfor %}
{% if basket.packages|length > 0 %}
<li class="visible-xs {% if page.category == "checkout" %}active{% endif %}"><a href="/checkout/basket">Checkout</a></li>
{% endif %}
{% if basket.username %}
<li class="visible-xs"><a href="/checkout/logout">Logout</a></li>
{% endif %}
</ul>
</div>
</div>
</nav>
<div class="notification">
{% if page.message.display %}
<div class="alert alert-{{ page.message.type}} alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
{{ page.message.text }}
</div>
{% endif %}
</div>
{% block content %}{% endblock %}
{% if store.plan == "1" %}
<div class="advertisement">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle" style="display:inline-block;width:728px;height:90px;" data-ad-client="ca-pub-9830135219921132" data-ad-slot="7404819681"></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
</div>
{% endif %}
<div class="footer">
<div class="language">
<div class="dropdown dropup">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="fa fa-globe"></span> Language</a>
<ul class="dropdown-menu up">
{% for language in store.languages %}
<li><a href="?lang={{ language.code }}">{{ language.name }}</a></li>
{% endfor %}
</ul>
</div>
</div>
{% if store.branding or store.plan != "3" %}
<div class="branding">
<!-- Do not remove the Buycraft branding if you are not on the Ultimate Plan. Your account will be deleted. -->
Powered by <a href="http://buycraft.net" target="_blank">Buycraft.net</a>
</div>
{% endif %}
</div>
</div>
<div class="modal" id="popup-modal" tabindex="-1" role="dialog"></div>
{% if page.category == "checkout" %}
<script src="https://wallet.google.com/inapp/lib/buy.js"></script>
<script src="https://js.stripe.com/v2/"></script>
{% endif %}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="/templates/209/js/bootstrap.min.js"></script>
<script src="/templates/209/js/skin.min.js"></script>
<script src="/templates/209/js/site.js"></script>
</body>
</html>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
a:link, a:visited {
display: block;
font-weight: bold;
color: #FFFFFF;
background-color: #98bf21;
width: 120px;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
}
a:hover, a:active {
background-color: #7A991A;
}
</style>