0

次の例では、サブ要素にカーソルを合わせたときにトップレベルのナビゲーションの境界線を保持することはできますか？サブアイテムにカーソルを合わせると、「AboutUs」の黒い境界線を保持したいと思います。例： http： //jsfiddle.net/6zKRC/2/

HTML

<div class="navigation">
  <ul class="navigation fc">
   <li>
    <a href="/">Home</a>
   </li>
   <li class="">
    <a href="/about.aspx">About</a>
    <ul>
      <li>
        <a href="/about/sub-navigation-1.aspx">Sub Navigation 1</a>
      </li>
      <li>
        <a href="/about/sub-navigation-2.aspx">Sub Navigation 2</a>
      </li>
    </ul>
  </li>
 </ul>
</div>​

CSS

.navigation ul {
  font-family: Arial, Verdana;
  font-size: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.navigation ul li {
  display: block;
  position: relative;
  float: left;
}

.navigation li ul {
    display: none; 
}

.navigation ul li a {
  display: block;
  text-decoration: none;
  color: #000;
  font-weight:bold;
  padding: 5px 15px 5px 15px;
  white-space: nowrap;
}

.navigation ul li a:hover { 
  background: #CCC;
  color:black;
  border:solid 1px black;
  border-bottom:0;
}

.navigation li:hover ul {
  display: block;
  position: absolute;
  border:solid 1px black;
  border-top:0;
}

.navigation li:hover li {
  float: none;
  font-size: 11px;
}

.navigation li:hover a {
  background: #CCC; 
}

.navigation li:hover li a:hover {
  background: #CCC;
  border:0;
}

</ p>

4

2 に答える 2

1

次のようにcssを変更します

.navigation li:hover a {
     background: #CCC; 
     border:solid 1px black;
}

http://jsfiddle.net/6zKRC/2/を参照してください

于 2012-05-30T10:03:50.117 に答える
1

こんにちは私はあなたのCSSにいくつかの変更を加えましたあなたの更新されたCSSをチェックしてください：-

CSS

.navigation ul {
  font-family: Arial, Verdana;
  font-size: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.navigation ul li {
  display: block;
  position: relative;
  float: left;
}
.navigation li ul {
    display: none; 
}
.navigation ul li a {
  display: block;
  text-decoration: none;
  color: #000;
  font-weight:bold;
  padding: 5px 15px 5px 15px;
  white-space: nowrap;
}
.navigation ul li:hover { 
  background: #CCC;
  color:black;
  border:solid 1px black;
  border-bottom:0;
}
.navigation li:hover ul {
  display: block;
  position: absolute;
  border:solid 1px black;
  border-top:0;
    left:-1px;
} 
.navigation li:hover ul li {
  float: none;
  font-size: 11px;
      background: #CCC; 

}
.navigation li:hover li:hover {
  background:#e6e6e6;
  border:0;
}

HTML

<div class="navigation">
  <ul class="navigation fc">
   <li>
    <a href="/">Home</a>
   </li>
   <li class="">
    <a href="/about.aspx">About</a>
    <ul>
      <li>
        <a href="/about/sub-navigation-1.aspx">Sub Navigation 1</a>
      </li>
      <li>
        <a href="/about/sub-navigation-2.aspx">Sub Navigation 2</a>
      </li>
    </ul>
  </li>
 </ul>
</div>​

私はあなたがこれを見てくれることを願っています：-http：//jsbin.com/uwemuy/5/edit

于 2012-05-30T10:13:31.683 に答える