Team:KIT-Kyoto/01wiki

<html>

<div id="menu">
   <ul>
      <li><a href="#">Home</a>
      </li>
     <li><a href="#">About Us</a>
         <ul>
            <li><a href="#">Profile</a></li>
            <li><a href="#">YouTube</a></li>
         </ul>
      </li>
      <li><a href="#">Project</a>
         <ul>
            <li><a href="#"></a></li>
            <li><a href="#"></a></li>
            <li><a href="#"></a></li>
            <li><a href="#"></a></li>
         </ul>
      </li>
   </ul>
   <ul>
        <li><a href="">Notebook</a></li>
           <ul>
            <li><a href="#"></a></li>
            <li><a href="#"></a></li>
            <li><a href="#"></a></li>
            <li><a href="#"></a></li>
         </ul>
      </li>
   </ul>
     <ul>
        <li><a href="">Safety</a></li>
           <ul>
            <li><a href="#"></a></li>
            <li><a href="#"></a></li>
            <li><a href="#"></a></li>
            <li><a href="#"></a></li>
         </ul>
      </li>
   </ul>
</div>

<style type="text/css>
/* メインメニュー */
#menu ul {
   display:block;
   list-style-type: none;
   margin:0;
   padding:0;
}

/* サブメニュー1段目 */
#menu ul ul{
   display:none;
   position:absolute;
   top:100%;
   left:0;
}

/* サブメニュー2段目以降 */
#menu ul ul ul {
   top:0;
   left:100%;
}

/* リスト */
#menu li {
   float:left;
}

#menu li li {
   clear:both;
}

#menu li:hover {
   position:relative;
}

#menu li:hover > ul {
   display: block
}
/* デザイン */
#menu li {
   line-height:1.6em;
   text-align: center;
   background:#ddd;
}

#menu li li {
   text-align: left;
}

#menu li a{
   display: block;
   width:100px;
   text-decoration:none;
   color:#333;
   padding:0 10px;
}

#menu li:hover {
   background:#7BBA10;
   color:#333;
}

#menu .column1, #menu .column2, #menu .column3 {
   color:#333;
   background:#7BBA10;
}
</style>
</html>