如何使用CSS创建一个垂直子菜单的水平HTML菜单？ [英] How can I create a horizontal HTML menu with a vertical submenu using CSS only?
问题描述
我想设计一个水平菜单，onMouseover我想要一个垂直子菜单出现。
我冲浪了很多，发现了一些代码，但是当我执行时，几乎所有的代码都正确地得到了水平菜单，但子菜单根本不显示。
我使用Windows上的ActivePerl 5.12进行编程。
我正在使用IE7进行显示，这是为什么没有得到正确的结果？
请帮助我找到解决方案。谢谢。
这是我试图执行的代码片段。
< style type =text / css>
* {
margin：0;
padding：0;
}
body {
font-family：Trebuchet MS，Helvetica，Sans-Serif;
font-size：14px;
}
a {
text-decoration：none;
颜色：＃838383;
}
a：hover {
颜色：黑色;
}
菜单{
position：relative;
margin-left：30px;
}
菜单a {
display：block;
width：140px;
}
菜单ul {
list-style-type：none;
padding-top：5px;
}
menu li {
float：left;
职位：亲属;
padding：3px 0;
text-align：center;
}
菜单ul.sub-menu {
display：none;
位置：绝对;
top：20px;
left：-10px;
padding：10px;
z-index：90;
}
菜单ul.sub-menu li {
text-align：left;
}
menu li：hover ul.sub-menu {
display：block;
border：1px solid #ececec;
}
< / style>
HTML零件
< div id =menu>
< ul>
< li>
< a href =＃>主页< / a>
< ul class =sub-menu>
< li>< a href =＃>网页< / a>< / li>
< li>< a href =＃>存档< / a>< / li>
< li>< a href =＃>新帖< / a>< / li>
< li>< a href =＃>最近的评论< / a>< / li>
< / ul>
< / li>
< li>
< a href =＃>关于< / a>
< ul class =sub-menu>
< li>< a href =＃>了解我们< / a>< / li>
< li>< a href =＃>了解我们的工作< / a>< / li>
< / ul>
< / li>
< li>
< a href =＃>联络人< / a>
< ul class =sub-menu>
< li>< a href =＃>电邮我们< / a>< / li>
< li>< a href =＃>使用我们的联系表单< / a>< / li>
< / ul>
< / li>
< / ul>
< / div>
首先，如果您有选择，请升级到IE8 。 IE7真的没有理由被使用。 :-)也就是说，IE7应该做你想做的事......只是意识到它有显着的缺失功能，所以它可能会让你的生活变得更难。其次，你的问题说你找到了一些'代码'（教程？），但你没有得到你想要的结果;如果您告诉我们您使用过哪些教程，或者至少向我们展示了一些无法使用的代码，并告诉我们您遇到了哪些问题，那么这将有所帮助。
我会尝试提供一个答案，虽然...
您的问题意味着您想编写一个仅受CSS控制的菜单。
考虑到这一点，使用什么语言生成HTML并不重要，因为您的HTML只需要包含嵌套< ul> 和< li> 标签，用几个ID或类来告诉你的CSS在哪里应用它的样式。 p>
从这个角度来看，Perl代码（或任何其他语言）不应该特别复杂。 CSS可能很复杂，但它可能与您的Perl代码是分开的。
在CSS中，悬停样式将允许您构建鼠标悬停下拉功能。不需要Perl（或Javascript）。我建议您查看 A List Apart 网站;这是一个很好的CSS教程网站，并且有一些非常好的CSS驱动菜单示例。
I want to design a Horizontal menu and onMouseover I want a vertical submenu to appear. I surfed a lot and found out some codes ,but when I execute, in almost all the codes I get the Horizontal menu properly but the submenus dont get displayed at all.
i am programming using ActivePerl 5.12 on Windows.
I am using IE7 for display, is that the reason why am not getting the proper result? Please do help me find the solution. Thank you.
Here's the piece of code which i was trying to execute..
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
font-family: "Trebuchet MS", Helvetica, Sans-Serif;
font-size: 14px;
}
a {
text-decoration: none;
color: #838383;
}
a:hover {
color: black;
}
menu {
position: relative;
margin-left: 30px;
}
menu a {
display: block;
width: 140px;
}
menu ul {
list-style-type: none;
padding-top: 5px;
}
menu li {
float: left;
position: relative;
padding: 3px 0;
text-align: center;
}
menu ul.sub-menu {
display: none;
position: absolute;
top: 20px;
left: -10px;
padding: 10px;
z-index: 90;
}
menu ul.sub-menu li {
text-align: left;
}
menu li:hover ul.sub-menu {
display: block;
border: 1px solid #ececec;
}
</style>
HTML Part
<div id="menu">
<ul>
<li>
<a href="#">Home</a>
<ul class="sub-menu">
<li><a href="#">Pages</a></li>
<li><a href="#">Archives</a></li>
<li><a href="#">New Posts</a></li>
<li><a href="#">Recent Comments</a></li>
</ul>
</li>
<li>
<a href="#" >About</a>
<ul class="sub-menu">
<li><a href="#">Get to know us</a></li>
<li><a href="#">Find out what we do</a></li>
</ul>
</li>
<li>
<a href="#">Contact</a>
<ul class="sub-menu">
<li><a href="#">E-mail Us</a></li>
<li><a href="#">Use Our Contact Form</a></li>
</ul>
</li>
</ul>
</div>
Firstly, if you have a choice, upgrade to IE8. IE7 really has no reason to be in use. :-) That said, IE7 should do what you want... just be aware that it has significant missing functionality, so it might make your life harder.
Secondly, your question says you've found some 'codes' (tutorials?), but you're not getting the results you want; it would help if you told us which tutorials you've used, or at least showed us some of the code that doesn't work, and tell us what problems you've had with it.
I will try to provide an answer, though...
Your question implies that you want to write a menu that is controlled only by CSS.
With that in mind, it doesn't really matter what language you use to generate the HTML, because your HTML should only need to consist of nested <ul> and <li> tags, with a few IDs or classes to tell your CSS where to apply its styles.
From that perspective, the Perl code (or any other language) shouldn't be particularly complex. The CSS may be complex, but that would be separate from your Perl code.
In CSS, the :hover style will allow you to build mouse-over drop-down functionality. No Perl (or Javascript) required. I'd suggest looking at the A List Apart site; it's a good site for CSS tutorials and has some very good examples of CSS-driven menus.
这篇关于如何使用CSS创建一个垂直子菜单的水平HTML菜单？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
