「Broken/縦ドロップダウンメニュー」の版間の差分

提供：大乱闘スマッシュブラザーズWiki
ビジュアルウィキテキスト
細編集の要約なし
細編集の要約なし
1行目: 1行目:
<includeonly><style type="text/css">
<includeonly><style type="text/css">
<!--  
<!--  
 
ul.pulldown_menu_3 {
#container {
list-style: none; /* 先頭記号を消す */
overflow: hidden;
width: 500px;
margin: 0 auto;
}
#gnav {
float: left;
width: 100px;
// height: 125px;
}
#gnav ul li {
width: 100px;
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: 100px; /* リスト項目の幅 */
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: 100px; /* 1段目の幅の分を右へ */
top: 0px; /* 1段目の上下方向は同じ位置 */
list-style: none; /* 2段目の先頭記号を消す */
padding-left: 0px; /* 2段目の左位置を1段目に揃える */
}
}
#gnav ul li ul {
ul.pulldown_menu_3 a {
display: none;
color: white; /* 文字色 */
margin: 0;
display: block; /* ブロックレベルに */
text-align: center; /* 文字を中央合わせに */
padding: 5px; /* 内部の余白 */
border: 1px #9999FF solid; /* 枠線 */
text-decoration: none; /* 下線を消す */
outline: none; /* 選択時の点線枠線を消す */
background:#BBB; /* 通常の背景画像 */
}
}
#gnav ul li:hover ul {
ul.pulldown_menu_3 ul a {
display: block;
background:#000; /* ２段目以降の背景画像 */
position: relative;
top: -25px;
left: 100px;
width: 100px;
height: 25px;
}
}
.content {
ul.pulldown_menu_3 a:hover {/* マウスカーソルが乗っている状態 */
float: left;
background:#CCC; /* 通常とは違う背景画像 */
width: 400px;
color: blue; /* 文字色 */
height: 125px;
background: #cccccc;
}
}
.content p {
ul.pulldown_menu_3 a:active {/* マウスがクリックされている状態 */
padding: 5px;
background:#AAA; /* 通常とは違う背景画像 */
color: red; /* 文字色 */
}
}
-->   
-->   
</style>
</style>
<div id="container">
 
<div id="gnav">
 
<ul class= "pulldown_menu_3 pulldown_menu_2">
<li><a href= "stepuphtml1.html"> STEP 1</a>
<ul>
<li><a href= "stepuphtml1.html"> STEP 1-1</a></li>
<li><a href= "stepuphtml1.html"> STEP 1-2</a></li>
<li><a href= "stepuphtml1.html"> STEP 1-3</a></li>
</ul>
</li>
<li><a href= "stepuphtml2.html"> STEP 2</a>
<ul>
<ul>
<li><a href="#">Home</a></li>
<li><a href= "stepuphtml2.html"> STEP 2-1</a></li>
<li><a href="#">Strategy</a>
<li><a href= "stepuphtml2.html"> STEP 2-2</a></li>
<ul>
</ul>
<li><a href="http://example.com/">example.com</a></li>
<li><a href="http://example.com/">example.com</a></li>
</ul>
</li>
</li>
<li><a href="#">About</a>
<li><a href= "stepuphtml3.html"> STEP 3</a>
<ul>
<ul>
<li><a href="http://example.com/">example.com</a></li>
<li><a href= "stepuphtml3.html"> STEP 3-1</a></li>
<li><a href="http://example.com/">example.com</a></li>
<li><a href= "stepuphtml3.html"> STEP 3-2</a></li>
</ul>
<li><a href= "stepuphtml3.html"> STEP 3-3</a></li>
<li><a href= "stepuphtml3.html"> STEP 3-4</a></li>
</ul>
</li>
</li>
<li><a href="#">Works</a>
<li><a href= "stepuphtml4.html"> STEP 4</a>
<ul>
<ul>
<li><a href="http://example.com/">example.com</a></li>
<li><a href= "stepuphtml4.html"> STEP 4-1</a></li>
<li><a href="http://example.com/">example.com</a></li>
<li><a href= "stepuphtml4.html"> STEP 4-2</a></li>
</ul>
<li><a href= "stepuphtml4.html"> STEP 4-3</a></li>
</ul>
</li>
</li>
<li><a href="mailto:example@anti-spam.example.com">Mail</a></li>
</ul>
</ul>
<!--gnav--></div>
 
</includeonly>
</includeonly>

2014年3月18日 (火) 22:18時点における版

「https://smashwiki.info/index.php?title=Broken/縦ドロップダウンメニュー&oldid=4527」から取得