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

debugcn 发表于 Dev

吉兹

请帮助我创建以下设计的子菜单。子菜单应与列表正下方对齐。我的设计菜单和子菜单似乎相同。

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>

默认情况下，子菜单和子菜单不在菜单上单击可见。

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

非常感谢您的帮助。

穆罕默德

#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>