|
|
| (同じ利用者による、間の19版が非表示) |
| 1行目: |
1行目: |
| <includeonly><style type="text/css"> | | <includeonly><style type="text/css"> |
| <!-- | | <!-- |
| | | ul.pulldown_menu_2 ul { |
| #container {
| | display: none; /* 通常は表示しない */ |
| overflow: hidden;
| |
| width: 500px;
| |
| margin: 0 auto;
| |
| } | | } |
| #gnav {
| | ul.pulldown_menu_2 li:hover > ul { |
| float: left;
| | display: block; /* マウスが乗ったら表示する */ |
| width: 100px;
| |
| // height: 125px; | |
| } | | } |
| #gnav ul li {
| | ul.pulldown_menu_3 { |
| width: 100px;
| | padding-left:0.5em; /* 内部の余白 */ |
| height: 25px;
| |
| text-align: center;
| |
| background: #c8d6e8;
| |
| list-style-image: none;
| |
| list-style-type: none;
| |
| } | | } |
| #gnav ul li a {
| | ul.pulldown_menu_3 li { |
| display: block;
| | position: relative; /* 2段目の位置を指定するため */ |
| width: 100px;
| | /* width: 10em; /* リスト項目の幅 */*/ |
| height: 25px;
| |
| color: #f0f0f0;
| |
| font-size: 100%;
| |
| line-height: 1.6;
| |
| background: #b0c4de;
| |
| } | | } |
| #gnav ul li a:hover {
| | ul.pulldown_menu_3 ul { |
| color: #777777;
| | position: absolute; /* 2段目の位置を絶対位置で指定 */ |
| background: none;
| | left: 8.5em; /* 1段目の幅の分を右へ */ |
| | top: 0px; /* 1段目の上下方向は同じ位置 */ |
| | list-style: none; /* 2段目の先頭記号を消す */ |
| | padding-left: 0px; /* 2段目の左位置を1段目に揃える */ |
| | margin:0; |
| } | | } |
| #gnav ul li ul {
| | ul.pulldown_menu_3 a { |
| display: none;
| | display: block; /* ブロックレベルに */ |
| margin: -0.3em 0 0 -1.6em;
| | text-decoration: none; /* 下線を消す */ |
| | outline: none; /* 選択時の点線枠線を消す */ |
| } | | } |
| #gnav ul li:hover ul {
| | ul.pulldown_menu_3 ul a {/* 2段目 */ |
| display: block;
| | list-style: none; /* 先頭記号を消す */ |
| position: relative;
| | width: 12em; /* リスト項目の幅 */ |
| top: -25px;
| | border: 1px #AAA solid; /* 枠線 */ |
| left: 100px;
| | padding-left:0.5em; /* 内部の余白 */ |
| width: 100px;
| | background:#FFF; |
| height: 25px;
| |
| } | | } |
| .content { | | ul.pulldown_menu_3 a:hover {/* マウスカーソルが乗っている状態 */ |
| float: left;
| | background:#CCCCFF; |
| width: 400px;
| |
| height: 125px;
| |
| background: #cccccc;
| |
| }
| |
| .content p {
| |
| padding: 5px;
| |
| } | | } |
| --> | | --> |
| </style> | | </style></includeonly> |
| <div id="container">
| |
| <div id="gnav">
| |
| <ul>
| |
| <li><a href="#">Home</a></li>
| |
| <li><a href="#">Strategy</a>
| |
| <ul>
| |
| <li><a href="http://example.com/">example.com</a></li>
| |
| <li><a href="http://example.com/">example.com</a></li>
| |
| </ul>
| |
| </li>
| |
| <li><a href="#">About</a>
| |
| <ul>
| |
| <li><a href="http://example.com/">example.com</a></li>
| |
| <li><a href="http://example.com/">example.com</a></li>
| |
| </ul>
| |
| </li>
| |
| <li><a href="#">Works</a>
| |
| <ul>
| |
| <li><a href="http://example.com/">example.com</a></li>
| |
| <li><a href="http://example.com/">example.com</a></li>
| |
| </ul>
| |
| </li>
| |
| <li><a href="mailto:example@anti-spam.example.com">Mail</a></li>
| |
| </ul>
| |
| <!--gnav--></div>
| |
| <div class="content">
| |
| <p>ドロップダウンメニュー（縦）のサンプルです。<br>
| |
| ここからコンテンツになります。<br>
| |
| メニュー部分にマウスオーバーするとコンテンツの上に子メニューが展開します。</p>
| |
| </div>
| |
| <!--container--></div>
| |
| </includeonly> | |