我正在尝试制作一个带有下拉菜单的网站。在阅读了几本指南甚至在这里搜索之后,菜单一直在做奇怪的事情。我尝试了很多东西,所以有些行可能会变得多余。
子菜单不在菜单下面,而是在菜单旁边。
有人可以帮助我吗? 提前谢谢
html:
<div id="menu">
<ul>
<li class="current_page_item"><a href="#" accesskey="1" title="">Home</a></li>
<li><a href="pagina2.html" accesskey="2" title="">Hardware</a>
<ul>
<li><a href="pagina2.html" accesskey="69" title="">Hardware2</a></li>
<li><a href="pagina2.html" accesskey="70" title="">Hardware3</a></li>
</ul></li>
<li><a href="#" accesskey="3" title="">About Us</a></li>
<li><a href="index_oud.html" accesskey="4" title="">sjabloon</a></li>
<li><a href="#" accesskey="5" title="">Contact Us</a>
</li>
</ul>
</div> <!-- menu -->
CSS:
#menu
{
position: absolute;
right: 0;
}
#menu ul
{
display: inline-block;
line-height: 1em;
position: relative; /* naast elkaar*/
right: 0;
top: 2em;
list-style: none;
/*display: inline-table;*/
}
/*
#menu ul: after
{
content: "";
clear: both;
display: inline-block;
}*/
#Menu ul ul {
display: none;
}
/*
#Menu ul li:hover > ul
{
display: inline-block;
}
*/
#menu ul li
{
float: left; /* op een lijn */
margin-left: 0.50em;
padding: 1em 1.5em;
letter-spacing: 0.20em;
font-size: 0.90em;
font-weight: 600;
text-transform: uppercase;
color: #OOC;
outline: 0;
}
#menu ul li:hover {
background: #00F;
}
#menu ul li:hover a {
color: #FFF;
}
#menu ul li a /*#menu ul li span*/
{
display: inline-block
margin-left: 0.50em;
letter-spacing: 0.20em;
text-decoration: none; /* geen onderlijning*/
font-size: 0.90em;
font-weight: 600;
text-transform: uppercase;
outline: 0;
color: #OOC;
}
#menu ul ul /* submenu*/
{
background: #00F;
top: 100%;
padding: 0;
position: absolute;
visibility: hidden;
}
#menu ul:hover ul
{
visibility:visible;
}
#menu ul ul li
{
float: none; /*onder mekaar */
border-top: 1px solid #CCCCCC;
border-bottom: 1px solid #CCCCCC;
position: relative;
color: #FFF;
}
最佳答案
这将帮助您:
HTML
<div id="menu">
<ul>
<li class="current_page_item"><a href="#" accesskey="1" title="">Home</a>
<ul>
<li><a href="pagina2.html" accesskey="69" title="">Hardware2</a></li>
<li><a href="pagina2.html" accesskey="70" title="">Hardware3</a></li>
</ul>
</li>
<li><a href="pagina2.html" accesskey="2" title="">Hardware</a>
<ul>
<li><a href="pagina2.html" accesskey="69" title="">Hardware2</a></li>
<li><a href="pagina2.html" accesskey="70" title="">Hardware3</a></li>
</ul>
</li>
<li><a href="#" accesskey="3" title="">About Us</a>
<ul>
<li><a href="pagina2.html" accesskey="69" title="">Hardware2</a></li>
<li><a href="pagina2.html" accesskey="70" title="">Hardware3</a></li>
</ul>
</li>
<li><a href="index_oud.html" accesskey="4" title="">sjabloon</a>
<ul>
<li><a href="pagina2.html" accesskey="69" title="">Hardware2</a></li>
<li><a href="pagina2.html" accesskey="70" title="">Hardware3</a></li>
</ul>
</li>
<li><a href="#" accesskey="5" title="">Contact Us</a>
<ul>
<li><a href="pagina2.html" accesskey="69" title="">Hardware2</a></li>
<li><a href="pagina2.html" accesskey="70" title="">Hardware3</a></li>
</ul>
</li>
</ul>
</div>
样式表
#menu {
position: absolute;
right: 0;
}
#menu ul {
display: inline-block;
line-height: 1em;
position: relative;
/*right: 0;*/
top: 2em;
list-style: none;
}
#menu ul li {
float: left;
padding: 1em 1.5em;
letter-spacing: 0.20em;
font-size: 0.90em;
font-weight: 600;
text-transform: uppercase;
color: #00C;
outline: 0;
}
#menu ul li a {
display: inline-block;
margin-left: 0.50em;
letter-spacing: 0.20em;
text-decoration: none;
font-size: 0.90em;
font-weight: 600;
text-transform: uppercase;
outline: 0;
color: #00c;
}
#menu ul li:hover {
background: #00F;
}
#menu ul li:hover a {
color: #FFF;
}
#menu ul:hover ul {
visibility: visible;
}
#menu ul ul {
/*display: none;*/
background: #00F;
top: 100%;
padding: 0;
position: absolute;
visibility: hidden;
}
#menu ul ul li {
float: none;
border-top: 1px solid #CCCCCC;
border-bottom: 1px solid #CCCCCC;
position: relative;
color: #FFF;
}
这是 Demo
关于HTML 子菜单不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24222102/