我正在尝试自定义地平线仪表板（openstack）。在仪表板中有一个 Nov-accordians 菜单（请参见下图），我想隐藏它并仅在鼠标悬停在菜单区域上时显示。这里 nav_accordion 是 css 类。请告诉我应该在下面的 css 文件中添加什么代码以获得上述效果。
只有当我们将鼠标悬停在上面时，我才想显示以下菜单。这个菜单在左上角。
将鼠标悬停在菜单区域上时应出现菜单。
以下代码来自 github openstack(icehouse)
accordians_nav.css
@accordionBorderColor: #e5e5e5;
.outline(@outline) {
outline: @outline;
-moz-outline-style: @outline;
}
.nav_accordion {
//N: hide the nav accordion menu
display:none;
background-color: #f9f9f9;
color: #6e6e6e;
margin: 0px 0px;
dt, dd {
padding: 10px 0 10px 0;
line-height: 18px;
h4 {
border: 1px solid #BBBBBB;
border-right: 0;
border-bottom: 0;
background-color: #f0f0f0;
background-repeat: no-repeat;
background-position: 96% center;
background-image: url(/static/dashboard/img/right_droparrow.png);
padding: 10px 0 10px 0;
line-height: 16px;
margin-top: 0;
color: #6e6e6e;
font-weight: bold;
text-rendering: optimizelegibility;
max-width: 193px;
padding-right: 16px;
cursor: pointer;
div {
color: #6e6e6e;
font-size: 14px;
margin: 0 0 0 14px;
display: block;
font-weight: bold;
.outline(none);
overflow: hidden;
text-overflow: ellipsis;
max-width: 177px;
}
}
h4.active {
border-bottom: 1px solid #BBBBBB;
background-image: url(/static/dashboard/img/drop_arrow.png);
}
// N: This will change in the look of list
a {
color: #6e6e6e;
font-size: 16px;
margin: 0 0 0 14px;
padding: 0;
display: block;
font-weight: bold;
.outline(none);
text-decoration: none;
}
// TH
ul {
list-style: none outside none;
margin: 10px 0 0;
width: 222px;
}
// This is list for showing dashboard and panel
li {
a {
width: 185px;
padding: 10px;
display: block;
line-height: 18px;
margin-left: 20px;
font-weight: normal;
font-size: 13px;
}
a.active {
background: #fff;// this will change the color of active panel
border-top: 2px solid @accordionBorderColor;
border-left: 4px solid #d93c27;// this will change the color of left side of active panel
border-bottom: 2px solid @accordionBorderColor;
margin-left: 18px;// It will shift the panel rightside, so please check all the panel are aligned or not
.border-radius(5px 0 0 5px);// this will round the corner of panel
//for more info http://css3pie.com/demos/border-radius/
}
a:last-child {
margin-bottom: 8px;
}
}
}
dd {
padding: 0;
font-size: 12px;
}
dt {
border-top: 1px solid #BBBBBB;
background-color: @accordionBorderColor;
background-repeat: no-repeat;
background-position: 96% center;
background-image: url(/static/dashboard/img/right_droparrow.png);
padding-right: 16px;
max-width: 217px;
cursor: pointer;
div {
color: #6e6e6e;
font-size: 14px;
margin: 0 0 0 14px;
padding: 0;
font-weight: bold;
.outline(none);
overflow: hidden;
text-overflow: ellipsis;
max-width: 201px;
}
}
dt.active {
background-image: url(/static/dashboard/img/drop_arrow.png);
}
dt:first-child {
border-top: 0;
}
dt a {
text-decoration: none;
}
}
_accordion_nav.html
{% load horizon i18n %}
{% load url from future %}
<div>
<dl class="nav_accordion">
{% for dashboard, panel_info in components %}
{% if user|has_permissions:dashboard %}
{% if dashboard.supports_tenants and request.user.authorized_tenants or not dashboard.supports_tenants %}
<dt {% if current.slug == dashboard.slug %}class="active"{% endif %}>
<div>{{ dashboard.name }}</div>
</dt>
{% if current.slug == dashboard.slug %}
<dd>
{% else %}
<dd style="display:none;">
{% endif %}
{% for heading, panels in panel_info.iteritems %}
{% with panels|has_permissions_on_list:user as filtered_panels %}
{% if filtered_panels %}
{% if heading %}
<div><h4><div>{{ heading }}</div></h4>
{% endif %}
<ul>
{% for panel in filtered_panels %}
<li><a href="{{ panel.get_absolute_url }}" {% if current.slug == dashboard.slug and current_panel == panel.slug %}class="active"{% endif %} >{{ panel.name }}</a></li>
{% endfor %}
</ul>
{% if heading %}
</div>
{% endif %}
{% endif %}
{% endwith %}
{% endfor %}
</dd>
{% endif %}
{% endif %}
{% endfor %}
</dl>
</div>