Question

对不起，伙计们，我一定是脑子里死了，但我无法在这些下拉菜单上找到合作的样式。

我的颜色和字体是正确的，但是我在列表元素和a之间有不需要的空格，a：hover大小应该相同。

我希望得到一些帮助，让它正常工作。

以下是page

这是html：

  <ul class="dropdown">
<li><a href="#" id="home">Home</a></li>
<li><a href="#" id="about">About Us</a>
  <ul class="sub-menu">
    <li><a href="#">Our History</a></li>
    <li><a href="#">Our Process</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Financing</a></li>
    <li><a href="#">Testimonials</a></li>
    <li><a href="#">Subcontractors</a></li>
  </ul>
</li>
<li><a href="#"  id="personal">Personal Banking</a></li>
<li><a href="#"  id="commercial">Commercial Banking</a></li>
<li><a href="#"  id="service">Customer Service</a>
  <ul class="sub-menu">
    <li><a href="#">Our History</a></li>
    <li><a href="#">Our Process</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Financing</a></li>
    <li><a href="#">Testimonials</a></li>
    <li><a href="#">Subcontractors</a></li>
  </ul>
</li>
<li><a href="#"  id="investors">Investor Relations</a></li>
<li><a href="#"  id="contact">Contact Us</a></li>

这是CSS：

ul.dropdown        { position: relative; background: #4e8997; height: 40px; padding-left: 5px;  }
ul.dropdown li     { float: left; zoom: 1;  }
ul.dropdown li a
ul.dropdown li a:visited  { 
display: block;
margin-top: 5px; 
padding: .5em .6em;
line-height: 16px; 
color: #fff; 
font: bold 14px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; 
text-transform: uppercase;
border: none; 
}
ul.dropdown a:hover             { background-color: #c29c5d; color: #fff; }
ul.dropdown a:active                { background-color: #c29c5d; color: #fff; }

/*  LEVEL TWO */
ul.dropdown ul { 
    padding-left: 0;
    width: 200px; 
    display: none; 
    top:36px;
    margin-left: 0; 
    position: absolute;
}

ul.dropdown ul li { 
font: 10px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
border-bottom: 1px solid #ccc;
display: block;
margin: 0;
padding: 0; 
float: none; 
color: #fff; 
background-color: #c29c5d; 
}

ul.dropdown ul li a:link            { display: block; font-size: 10px; width: 188px; height: 16px;  }
ul.dropdown ul li a:hover           { background-color: #a2834d; color: #fff;  }

谢谢！

Answer 1

您似乎忘记了所需的两个,规则之间的a逗号

ul.dropdown li a
ul.dropdown li a:visited

应该是

ul.dropdown li a,
ul.dropdown li a:visited

Answer 2

这里有一些问题：

ul.dropdown ul {

应该是：

ul.dropdown li ul {

。

ul.dropdown li a <-- missing comma here
ul.dropdown li a:visited

Answer 3

问题出在你的标签上。尝试使用边距和填充，我正在修复它，但你继续编辑页面：$

下拉菜单和可怜的造型艺术

3 个答案: