我有一个水平导航的django应用程序。出于某种原因,我在创建下拉菜单时遇到问题。
看看这两张图片
第一张图显示了水平导航。在图像的左侧,有一个菜单。 当我将鼠标悬停在存储订单上时,第二个图像显示(这是唯一一个带有下拉菜单的链接。)由于某种原因,选项卡的右侧似乎有点偏离。这是因为存储,传递和收集的选项卡的长度因字数而不同。如果可能的话,我想尝试使这三个标签的长度相同。
我遇到的另一个问题是当我将光标移到存储订单上时,左侧菜单向右移动。
base_menu.html
<ul id="toc">
<li id="current"><a href="{% url mmc.views.return_clients %}"><span>Home</span></a></li>
<li><a href="{% url mmc.views.quote_step1 %}"><span>Create quote/order</span></a></li>
<li><a href="{% url mmc.views.search_item %}"><span> Item Search</a></span></li>
<li><a href="{% url mmc.views.order_list %}"><span>Storage orders</span></a><br/>
<ul class="subnav">
<li><a href="{% url mmc.views.order_list_service 1 %}"><span>Delivery orders</span></a></li><br/>
<li><a href="{% url mmc.views.order_list_service 2 %}"><span>Collection orders</span></a></li>
</ul>
</li>
<li><a href="{% url mmc.views.service_list 1 %}"><span>Delivery list</span></a></li>
<li><a href="{% url mmc.views.service_list 2 %}"><span>Collection list</span></a></li>
<li><a href="{% url mmc.views.invoice_list %}"><span>Export for invoicing</span></a></li>
<li><a href="{% url mmc.views.dbbackup %}"><span>Backup data</span></a></li>
<li><a href="{% url mmc.views.help_index %}" target="_blank" onclick="return showAddAnotherPopup(this);"><span>Help</span></a></li>
</ul>
<br/>
base.css
ul#toc {
height: 2em;
list-style: none;
margin: 0;
padding: 0;
}
ul#toc li{
background:#ffffff url(../images/tab.png);
float: left;
margin: 0 1px 0 0;
}
ul#toc span {
background: url(../images/tab.png) 100% 0;
display: block;
line-height: 2em;
padding-right: 10px;
}
ul#toc a {
color: #000000;
height: 2em;
float: left;
text-decoration: none;
padding-left: 10px;
}
ul#toc a:hover {
background: url(../images/tab2.png);
text-decoration: underline;
}
ul#toc a:hover span {
background: url(../images/tab2.png) 100% 0;
background-position: 100% -120px;
}
ul.subnav {
float:left;
display:none;
position:absolute;
}
ul#toc li:hover .subnav {
display:block;
}
编辑: @Andres:
如果我进行了更改,您可以从下图中看到,下拉标签需要降低一点。此外,收藏标签也缺失了,但好处是左手菜单没有向右移动。
更新 @Andres:我删除了模板中的
标签,重新显示了标签。现在使用margin-top:10px似乎工作。现在,从下图中,我需要确保我的下拉框可以重叠传递标题。我想我可能已经完成了。
答案 0 :(得分:1)
试试这个:
ul#toc {
height: 2em;
list-style: none;
margin: 0;
padding: 0;
}
ul#toc li{
background:#ffffff url(../images/tab.png);
float: left;
margin: 0 1px 0 0;
position:relative;
}
ul#toc span {
background: url(../images/tab.png) 100% 0;
display: block;
padding-right: 10px;
}
ul#toc a {
color: #000000;
float: left;
text-decoration: none;
padding-left: 10px;
}
ul#toc a:hover {
background: url(../images/tab2.png);
text-decoration: underline;
}
ul#toc a:hover span {
background: url(../images/tab2.png) 100% 0;
background-position: 100% -120px;
}
ul.subnav {
float:left;
display:none;
position:absolute;
}
ul#toc li:hover .subnav {
display:block;
}
因为你的ul.subnav
课程在弹出的时候仍然处于流动的状态,所以如果你绝对定位的话,它会在底部移动,相对于父li,它应该解决问题。