ニュース
@wikiのwikiモードでは
#news(興味のある単語)
<div id="menu">
<ul>
<li><a href="#">menu1</a>
<ul>
<li><a href="#">submenu1</a></li>
<li><a href="#">submenu2</a></li>
<li><a href="#">submenu3</a>
<ul>
<li><a href="#">submenu3-1</a></li>
<li><a href="#">submenu3-2</a></li>
<li><a href="#">submenu3-3</a>
<ul>
<li><a href="#">submenu3-3-1</a></li>
<li><a href="#">submenu3-3-2</a></li>
<li><a href="#">submenu3-3-3</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="#">menu2</a>
<ul>
<li><a href="#">submenu4</a></li>
<li><a href="#">submenu5</a></li>
</ul>
</li>
<li><a href="#">menu3</a>
<ul>
<li><a href="#">submenu6</a></li>
<li><a href="#">submenu7</a></li>
<li><a href="#">submenu8</a></li>
<li><a href="#">submenu9</a></li>
</ul>
</li>
</ul>
</div>
/* メインメニュー */
#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;
たとえば、#news(wiki)と入力すると以下のように表示されます。
最終更新:2012年04月15日 23:51