-1

私は3つのタブを持っています..

家

サービス

アカウント

<ul><li><a href=#>Home</a></li>
<li><a href=#>Services</a></li>
<li><a href=#>Account</a></li></ul>

css をリスト タブに適用して別のマウスオーバー カラーを表示するにはどうすればよいですか?

これを行う方法？

li {
   Background-color:#696969;
   display:Inline;
}
4

3 に答える 3

0

これが例です。このように、あなたのrequorementごとにメニューを作ることができます.

<html>
   <head>
      <style type="text/css">
          ul {list-style: none;padding: 0px;margin: 0px;}
          ul li {display: block;position: relative;float: left;border:1px solid #000}
          li ul {display: none;}
          ul li a {display: block;background: #000;padding: 5px 10px 5px 10px;text-decoration: none;
          white-space: nowrap;color: #fff;}
          ul li a:hover {background: #f00;}
          li:hover ul {display: block; position: absolute;}
          li:hover li {float: none;}
          li:hover a {background: #f00;}
          li:hover li a:hover {background: #000;}
          #drop-nav li ul li {border-top: 0px;}
      </style>
   </head>

   <body>
      <ul id="drop-nav">
          <li><a href="#">Support</a></li>

          <li><a href="#">Web Design</a>
             <ul>
                <li><a href="#">HTML</a></li>
                <li><a href="#">CSS</a></li>
                <li><a href="#">JavaScript</a></li>
             </ul>
          </li>

          <li><a href="#">Content Management</a>
             <ul>
                <li><a href="#">Joomla</a></li>
                <li><a href="#">Drupal</a></li>
                <li><a href="#">WordPress</a></li>
                <li><a href="#">Concrete 5</a></li>
             </ul>
          </li>

          <li><a href="#">Contact</a>
            <ul>
               <li><a href="#">General Inquiries</a></li>
               <li><a href="#">Ask me a Question</a></li>
            </ul>
          </li>
      </ul>
 </body>
</html>
于 2013-08-02T05:06:11.883 に答える