Question

我有一个下拉菜单，可以在Mac上的Opera，Safari，Firefox，Chrome中正常使用。

当我在PC上测试时，下拉菜单太长，“论坛”标签会在末尾被分流并位于“主页”标签下。这种情况发生在Firefox，IE和Chrome上。这是我迄今为止测试过的唯一一个。

我对这个问题有点困惑。你有什么可以建议的吗？

我正在谈论的网站：http://www.makingsense.co.uk/index-new.html

下拉菜单代码：

<div class="navigation-drop">

<div id="colortab" class="ddcolortabs">
<ul>
<li><a href="index-new.html" title="Home"><span>Home</span></a></li>
<li><a href="team.html" title="New"><span>Team</span></a></li>
<li><a href="fv.html" title="CSS" rel="dropmenu1_a"><span>First Visit</span></a></li>
<li><a href="pd.html" title="CSS" rel="dropmenu2_a">
    <span>Possible Diagnoses</span></a></li>    
<li><a href="ad.html" title="CSS" rel="dropmenu3_a">
    <span>After Diagnosis</span></a></li>
<li><a href="treatment.html" title="CSS" rel="dropmenu4_a">
    <span>Treatment</span></a></li>
<li><a href="follow.html" title="CSS" rel="dropmenu5_a"><span>Follow Up</span></a></li>
<li><a href="support.html" title="CSS" rel="dropmenu6_a"><span>Support</span></a></li>
<li><a href="contact-ooss.html" title="Useful Tools"><span>Contact Us</span></a></li>
<li><a href="research.html" title="Useful Tools"><span>Research</span></a></li>
<li><a href="forum.html" title="Useful Tools"><span>Forum</span></a></li>
</ul>
</div>

<!--1st drop down menu -->                                                   
<div id="dropmenu1_a" class="dropmenudiv_a">
    <a href="fv.html">Why have I been referred?</a>
    <a href="fv-2.html">What happens on arrival?</a>
    <a href="fv-3.html">What tests will I need?</a>
</div>

<script type="text/javascript">
//SYNTAX: tabdropdown.init("menu_id", [integer OR "auto"])
tabdropdown.init("colortab", 3)
</script>

Answer 1

尝试将字体大小更改为11px。

.ddcolortabs ul{
  font: normal 11px Arial, Verdana, sans-serif;
  margin:0;
  padding:0;
  list-style:none;
}

然后，如果您希望将字体保持为12，请减少跨度上的左/右填充：

.ddcolortabs a span {
  background: none repeat scroll 0 0 #298D2F;
  color: #ECEAE5;
  display: block;
  float: left;
  padding: 7px 12px;
}

下拉菜单适用于Mac浏览器，但不适用于PC

1 个答案: