Question

请帮我创建以下设计的子菜单。子菜单应该对齐list.I我的设计菜单和子菜单看起来是一样的。

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>

Answer 2

你的意思是这样吗？

Fiddle

 <div id="vertmenu">
 <h1>How to sell your images</h1>
 <ul>
 <li><a href="#" tabindex="1">Home</a>
 <ul class="children">
 <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;
 }

 #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;
 }
 li:hover > .children {
 display:block;
 }
 .children {
 display:none;   
 }

注意在ul和hover事件上添加的子类。

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

2 个答案: