2

初めてCSSでメニューを再構築しようとしているので、初心者のエラーを許してください。

テスト ページは次の場所にあります: http://michaelrichlaw.com/legal.html

主な課題は、ul.menu のパディングを編集することで Chrome または Firefox に並べることができますが、両方に並べることができないことです。

2 つ目の課題は、メニュー項目の間に白い区切り線を追加することです。それらすべての右側に境界線を追加するのは運が良かっただけです（最後のメニュー項目の右側に線は必要ありません.

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

0

@Szymonの答えは、仕切りを行う1つの方法です。私が見た別の方法は次のとおりです。

.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 に答える