CSS 菜单适用于 Chrome，不适用于 Firefox

Question

我第一次尝试用 CSS 重建菜单，所以请原谅任何新手错误。

测试页面位于此处:http://michaelrichlaw.com/legal.html

主要的挑战是，虽然我可以通过编辑 ul.menu 中的填充使其在 Chrome 或 Firefox 中排列，但我无法在两者中排列。

第二个挑战是在菜单项之间添加一条白色分隔线。我只是幸运地在所有这些选项的右侧添加了一个边框(我不需要在最后一个菜单项的右侧添加一行。

HTML

<ul class="menu">
  <li><a href="index.html" target="_self" class="menu_link">HOME</a></li>
  <li><a href="profile.html" target="_self" class="menu_link">ATTORNEY PROFILE</a></li>
  <li><a href="testimonials.html" target="_self" class="menu_link">TESTIMONIALS</a></li>
  <li><a href="policy.html" target="_self" class="menu_link">INITIAL CONSULTATION POLICY</a></li>
  <li>
    <a href="resources.html" target="_self" class="menu_link">WEB RESOURCES</a>
    <ul>
      <li><a href="legal.html" target="_self" class="menu_link">LEGAL</a></li>
      <li><a href="children_and_family.html" target="_self" class="menu_link">CHILDREN AND FAMILY</a></li>
      <li><a href="special_education.html" target="_self" class="menu_link">SPECIAL EDUCATION</a></li>
      <li><a href="adoption.html" target="_self" class="menu_link">ADOPTION</a></li>
      <li><a href="alternative_dispute_resolution_and_restorative_justice.html" target="_self" class="menu_link">ALTERNATIVE DISPUTE RESOLUTION AND RESTORATIVE JUSTICE</a></li>
      <li><a href="government.html" target="_self" class="menu_link">GOVERNMENT</a></li>
      <li><a href="homeschooling.html" target="_self" class="menu_link">HOMESCHOOLING</a></li>
    </ul>
  </li>
  <li><a href="http://www.michaelrichlaw.blogspot.com/" target="_self" class="menu_link">ATTORNEY'S BLOG</a></li>  
  <li><a href="contact.html" target="_self" class="menu_link">CONTACT</a></li>

CSS

    <style>
ul.menu {
  text-align: left;
  display: inline-block;
  margin: 0;
  padding: 0px 23px 0px 23px;
  list-style: none;
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  background: #6e84ad;
}
ul.menu li {
  font: bold 12px/18px serif;
  display: inline-block;
  margin-right: -4px;
  position: relative;
  padding: 10px 10px;
  background: #fff;
-->  border-right: 1px solid white;
  cursor: pointer;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
  background: #6e84ad;
}
ul.menu li:hover {
  background: #555;
  color: #fff;
}
ul.menu li ul {
  padding: 0;
  position: absolute;
  top: 38px;
  left: 0;
  width: 150px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  display: none;
  opacity: 0;
  visibility: hidden;
  -webkit-transiton: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -ms-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  -transition: opacity 0.2s;
}
ul.menu li ul li { 
  background: #555; 
  display: block; 
  color: #fff;
  text-shadow: 0 -1px 0 #000;
}
ul.menu li ul li:hover { background: #666; }
ul.menu li:hover ul {
  display: block;
  opacity: 1;
  visibility: visible;
}

.horizontal {  }

a.menu_link:link {text-decoration:none;}
a.menu_link:visited {text-decoration:none;}
a.menu_link:hover {text-decoration:underline;}
a.menu_link:active {text-decoration:underline;}

a.menu_link:link {color:#FFFFFF;}      
a.menu_link:visited {color:#FFFFFF;}  
a.menu_link:hover {color:#FFFFFF;}  
a.menu_link:active {color:#FFFFFF;}  
</style>

Answer 1

我认为第一个答案是:

重置你的选项，因为所有浏览器都是从其他点开始的:最好的方法是使用重置 css 文件: http://meyerweb.com/eric/tools/css/reset/

*{
   margin: 0;
   padding: 0;
}

我认为你的第二个问题是关于类似的事情。

添加分隔符并将其从最后一个元素中删除:

ul.menu li{
   border-right: 1px solid white;
}
ul.menu li:last-child{
   border-right: none;
}

或其他方式:

ul.menu li{
   border-left: 1px solid white;
}
ul.menu li:first-child{
   border-right: none;
}

还是用背景，但是概念是一样的

ul.menu li{
   background-image: url("yourImage.jpg");
   background-position: left center;
}
ul.menu li:first-child{
   background-image: none;
}

编辑:为你工作的例子 EXAMPLE