2

我第一次尝试在 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>
4

3 回答 3

3

第一个答案是我认为是这样的：

重置您的选项，因为所有浏览器都从其他点开始：最好的方法是使用重置 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;
}

编辑：为您工作的示例 示例

于 2013-11-06T15:23:14.650 回答
0

@Szymon 的答案是做分隔线的一种方法。我见过的另一种方式是：

.divider {
    height:100%;
    width: 1px;
    background-color: #fff;
}

然后你的 HTML 就是：

<ul>
    <li>...</li>
    <li class="divider"></li>
    <li>...</li>
    <li class="divider"></li>
    <li>...</li>
    <li class="divider"></li>
    <li>...</li>
</ul>
于 2013-11-06T15:26:56.270 回答
0

如果您还没有这样做，您可能需要考虑使用 CSS 重置器。

重置样式表的目标是减少浏览器在默认行高、页边距和标题字体大小等方面的不一致。

看看这里： http: //meyerweb.com/eric/tools/css/reset/

于 2013-11-06T15:21:24.403 回答