html - 如何在html中创建垂直菜单的子菜单

Question

请帮我创建以下设计的子菜单。子菜单应该对齐到列表的正下方。我的设计菜单和子菜单看起来是一样的。

CSS:

#vertmenu {
font-family:'Trebuchet MS';
font-size:14px;
width:250px;
margin:0 0 0 20px;
padding:0;
}

#vertmenu h1 {
display:block;
font-size:14px;
color:gray;
width:159px;
margin:0;
padding:3px 0 5px 3px;
}

#vertmenu ul {
list-style:none;
border:none;
margin:0;
padding:0;
}

#vertmenu ul li {
margin:0;
padding:0;
}

#vertmenu ul li a {
font-size:14px;
display:block;
border-bottom:1px dashed #C39C4E;
text-decoration:none;
color:#666;
width:160px;
padding:5px 0 2px 4px;
}

#vertmenu ul li a:hover,#vertmenu ul li a:focus {
color:#000;
background-color:#eee;
}

HTML Code:

 <div id="vertmenu">
<h1>How to sell your images</h1>
<ul>
<li><a href="#" tabindex="1">Home</a>
<ul>
<li><a href="#" tabindex="1">Sub Menu 1</a></li>
<li><a href="#" tabindex="1">Sub Menu 2</a></li>
</ul>
</li>
<li><a href="#" tabindex="2">About Us</a></li>
<li><a href="#" tabindex="3">Computing</a></li>
<li><a href="#" tabindex="4">Web Sites</a></li>
<li><a href="#" tabindex="5">Games</a></li>
<li><a href="#" tabindex="6">Links</a></li>
</ul>
</div>

子菜单默认可见，点击菜单不可见。

我已经试过了，但是没用。

非常感谢您的帮助。

Answer 1

#vertmenu {
font-family:'Trebuchet MS';
font-size:14px;
width:250px;
margin:0 0 0 20px;
padding:0;
}

#vertmenu h1 {
display:block;
font-size:14px;
color:gray;
width:159px;
margin:0;
padding:3px 0 5px 3px;
}

#vertmenu>ul {
list-style:none;
border:none;
margin:0;
padding:0;
}
#sub{
list-style: none;
}

#vertmenu ul li {
margin:0;
padding:0;
}

#vertmenu ul li a {
font-size:14px;
display:block;
border-bottom:1px dashed #C39C4E;
text-decoration:none;
color:#666;
width:160px;
padding:5px 0 2px 4px;
}

#vertmenu ul li a:hover,#vertmenu ul li a:focus {
color:#000;
background-color:#eee;
}

HTML Code:

 <div id="vertmenu">
<h1>How to sell your images</h1>
<ul>
<li><a href="#" tabindex="1">Home</a>
<ul id="sub">
<li><a href="#" tabindex="1">Sub Menu 1</a></li>
<li><a href="#" tabindex="1">Sub Menu 2</a></li>
</ul>
</li>
<li><a href="#" tabindex="2">About Us</a></li>
<li><a href="#" tabindex="3">Computing</a></li>
<li><a href="#" tabindex="4">Web Sites</a></li>
<li><a href="#" tabindex="5">Games</a></li>
<li><a href="#" tabindex="6">Links</a></li>
</ul>
</div>