From 2012.igem.org
(Difference between revisions)
|
|
Line 1: |
Line 1: |
| <html> | | <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>
| |
- |
| |
| <head> | | <head> |
- | <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:#cc7eb1;
| |
- | padding:0 10px;
| |
- | }
| |
- |
| |
- | #menu li:hover {
| |
- | background:#f2a0a1;
| |
- | color:#cc7eb1;
| |
- | }
| |
- |
| |
- | #menu .column1, #menu .column2, #menu .column3 {
| |
- | color:#cc7eb1;
| |
- | background:#f2a0a1;
| |
- | }
| |
- | </style>
| |
| </head> | | </head> |
| </html> | | </html> |
Revision as of 11:11, 11 July 2012