你好，我对我的小问题有一点疑问......
我正在尝试编写一个子菜单以显示在列表中，但它会继续显示前一个子项目之后的子项目。
主菜单是水平菜单，我想垂直显示菜单。问题在哪里？
HTML是由Joomla CMS生成的，而CSS来自我需要为下拉菜单修改的外部模板。
<ul class="nav menuli" id="mainlevel-nav">
<li class="item-435 current active">
<a href="/">Home</a></li><li class="item-497 deeper parent">
<a href="/index.php/versicherung">Versicherung</a>
<ul class="nav-child unstyled small">
<li class="item-498"><a class="mainlevel-menu" href="/index.php/versicherung/kfz-versicherung">KFZ-Versicherung</a></li>
<li class="item-499"><a href="/index.php/versicherung/haftpflichtversicherung">Haftpflichtversicherung</a></li>
<li class="item-500"><a href="/index.php/versicherung/unfallversicherung">Unfallversicherung</a></li>
<li class="item-501"><a href="/index.php/versicherung/rechtsschutzversicherung">Rechtsschutzversicherung</a></li>
<li class="item-502"><a href="/index.php/versicherung/haus-und-wohnen">Haus und Wohnen</a></li></ul</li>
<li class="item-472"><a href="/index.php/finanzierung" title="Finanzierung">Finanzierung</a></li>
<li class="item-496"><a href="/index.php/veranlagung">Veranlagung</a></li>
<li class="item-473"><a href="/index.php/kontakt">Kontakt</a></li>
<li class="item-495"><a href="/index.php/impressum">Impressum</a></li>
<li class="item-494"><a href="/index.php/news">News</a></li>
</ul>
和CSS：
ul#mainlevel-menu{
list-style: none;
padding: 0;
margin: 0;
float: left;
background: none
}
ul#mainlevel-menu li{
display:inline;
padding-left: 0px;
padding-right: 0px;
float: left;
margin: 0;
font-size: 13px;
line-height: 32px;
white-space: nowrap;
position:relative;
}
ul#mainlevel-menu li a{
display: inline;
padding-left: 14px;
padding-right: 14px;
text-decoration: none;
color: #ffffff;
background: transparent;
}
ul#mainlevel-menu li a:hover{
color: #ffffff;
text-decoration: underline;
}
/* Menu Sub */
ul#mainlevel-nav li li{
white-space:nowrap;
display:none;
position:absolute;
left:20%;
background-image:url('../images/menu_bg.jpg')
}
ul#mainlevel-nav li:hover ul li{display:block}
/* End Menu */
答案 0 :(得分：0)
继承你的Html
<head>
<base href="http://johann2.hard-worx.eu/">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="author" content="Super User">
<meta name="generator" content="Joomla! - Open Source Content Management">
<title>Home</title>
<link href="http://johann2.hard-worx.eu/" rel="canonical">
<script src="/media/system/js/mootools-core.js" type="text/javascript"></script>
<script src="/media/system/js/core.js" type="text/javascript"></script>
<script src="/media/system/js/caption.js" type="text/javascript"></script>
<script src="/media/system/js/mootools-more.js" type="text/javascript"></script>
<script type="text/javascript">
window.addEvent('load', function() {
new JCaption('img.caption');
});
</script>
<link rel="stylesheet" href="/templates/_system/css/general.css" type="text/css">
<link rel="stylesheet" href="/templates/wm_07_31/css/template.css" type="text/css">
</head>
<body>
<div id="wrapper">
<div id="top">
<div id="logo"> <a href="/index.php"><img src="/templates/wm_07_31/images/logo.png" alt="
Notice: Undefined variable: siteName in /var/www/vhosts/hard-worx.eu/subdomains/johann2/httpdocs/templates/wm_07_31/index.php on line 22
" title="
Notice: Undefined variable: siteName in /var/www/vhosts/hard-worx.eu/subdomains/johann2/httpdocs/templates/wm_07_31/index.php on line 22
"></a>
</div>
<div id="mainmenu">
<ul class="nav menuli" id="mainlevel-nav">
<li class="item-435 current active"><a href="/">Home</a></li><li class="item-497 deeper parent"><a href="/index.php/versicherung">Versicherung</a><ul class="nav-child unstyled small ultestClass"><li class="item-498 testClassLi"><a class="mainlevel-menu" href="/index.php/versicherung/kfz-versicherung">KFZ-Versicherung</a></li><li class="item-499 testClassLi"><a href="/index.php/versicherung/haftpflichtversicherung">Haftpflichtversicherung</a></li><li class="item-500 testClassLi"><a href="/index.php/versicherung/unfallversicherung">Unfallversicherung</a></li><li class="item-501 testClassLi"><a href="/index.php/versicherung/rechtsschutzversicherung">Rechtsschutzversicherung</a></li><li class="item-502 testClassLi"><a href="/index.php/versicherung/haus-und-wohnen">Haus und Wohnen</a></li></ul></li><li class="item-472"><a href="/index.php/finanzierung" title="Finanzierung">Finanzierung</a></li><li class="item-496"><a href="/index.php/veranlagung">Veranlagung</a></li><li class="item-473"><a href="/index.php/kontakt">Kontakt</a></li><li class="item-495"><a href="/index.php/impressum">Impressum</a></li><li class="item-494"><a href="/index.php/news">News</a></li></ul>
</div>
<div id="maincontent">
<div id="left">
</div>
<div id="content">
<div class="item-page">
<h2 class="componentheading">Home</h2>
<p><strong>Willkommen beim Versicherungsmaklerbüro Germadnik KG</strong></p>
<p><strong><br></strong>Das Versicherungsmaklerbüro Ihres Vertrauens.</p>
<p> </p>
<table style="width: 100%;" cellpadding="0" cellspacing="0" border="0">
<tbody>
<tr>
<td>
<h1>Wir liefernd Ihnen maßgeschneiderte Lösungen</h1>
<ul style="list-style-type: disc;">
<li>Versicherung</li>
<li>Finanzierung</li>
<li>Veranlagung</li>
</ul>
</td>
<td>
<h1>TOP Kooperationen in den Bereichen</h1>
<ul style="list-style-type: disc;">
<li>Versicherungen</li>
<li>Finanzierungen</li>
<li>Vermögen</li>
<li>Bausparen</li>
</ul>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div id="footer">
<div id="footer_top"></div>
<div id="footer_bg">
<div id="footer_content">
</div>
<div id="footer_bot"></div>
</div>
<div id="copyright"><a href="http://www.blitz-it.at/" title="Blitz-IT.at">Design Blitz-it.at</a> <br>
</div>
</div>
</div></body>
这是你的css文件
body{
margin: 0;
padding: 0;
background-color: #999999;
background-image: url('../images/bg.gif');
background-position: top center;
background-repeat: repeat-y;
font-family: Verdana, Helvetica, sans-serif;
font-size:12px;
color: #626262;
}
#wrapper {
width: 928px;
margin-left:auto;
margin-right:auto;
}
#logo {
float: left;
padding-top: 25px;
padding-left:40px;
padding-bottom:25px;
}
#topmenu {
float:left;
padding-top: 30px;
}
.frontimage {
margin-bottom: 14px;
}
/* Menu */
#mainmenu {
clear: both;
width: 900px;
height: 30px;
background-image: url('../images/menu_bg.jpg');
margin-left:14px;
}
/* top navigation */
ul#mainlevel-nav{
list-style: none;
padding: 0;
margin: 0;
float: left;
background: none
}
ul#mainlevel-nav li{
padding-left: 0px;
padding-right: 0px;
float: left;
margin: 0;
font-size: 11px;
line-height: 30px;
white-space: nowrap;
border-right: 1px solid #666666;
background: none
}
ul#mainlevel-nav li a{
display: block;
padding-left: 14px;
padding-right: 14px;
text-decoration: none;
color: #ffffff;
background: transparent;
}
ul#mainlevel-nav li a:hover{
color: #999999;
text-decoration: underline;
}
/* for mainmenu flat list on the blue bg */
ul#mainlevel-menu{
list-style: none;
padding: 0;
margin: 0;
float: left;
background: none
}
ul#mainlevel-menu li{
padding-left: 0px;
padding-right: 0px;
float: left;
margin: 0;
font-size: 13px;
line-height: 32px;
white-space: nowrap;
}
ul#mainlevel-menu li a{
display: block;
padding-left: 14px;
padding-right: 14px;
text-decoration: none;
color: #ffffff;
background: transparent;
}
ul#mainlevel-menu li a:mouseenter{
color: #ffffff;
text-decoration: underline;
}
/*TEST*/
ul#mainlevel-nav li{
border-radius: 5%;
list-style: none;
display:block;
padding: 0;
margin: 0;
float: left;
position:relative;
}
ul#mainlevel-nav li li{
padding-left: 0px;
padding-right: 0px;
float: top;
margin: 0;
font-size: 11px;
line-height: 30px;
white-space: nowrap;
border-bottom: 1px solid #666666;
background: none;
color: #FFFFFF;
background-image: url('../images/menu_bg.jpg');
background-color: #424921;
position: absolute;
top:inherit;
top:inherit;
left:0;
margin: 0px;
}
ul#mainlevel-nav li li a{
list-style:none;
padding: 0;
margin: 0;
float: none;
background: none;
padding-left: 14px;
padding-right: 14px;
border: 10px;
}
ul#mainlevel-nav li a:hover{
color: #999999;
text-decoration: underline;
}
#mainlevel-nav li li {display:none}
#mainlevel-nav li:hover > ul li{
display:block;
}
/* End Topmenu */
/* Content */
#maincontent {
}
div#content {
width:666px;
float:right;
margin-right:14px;
margin-top:14px;
margin-bottom:14px;
}
/* Menu Sub */
/* End Menu */
#left {
width:220px;
float:left;
margin-left:14px;
margin-bottom: 14px;
}
.clr{
clear:both
}
/*Make round left modules */
div.module_menu div, div.module div {
background-image: url(../images/box_bg.gif);
}
div.module_menu div div, div.module div div{
background-image: url(../images/box_top.gif);
background-repeat: no-repeat;
background-position: left top;
}
div.module_menu div div div, div.module div div div{
background-image: url(../images/box_bot.gif);
background-repeat: no-repeat;
background-position: left bottom;
padding-top: 5px;
padding-right: 15px;
padding-bottom: 10px;
padding-left: 15px;
}
/* End round left modules */
.module_menu h3, .module_menu h3, .module h3 {
font-size: 12px;
line-height: 10px;
font-weight: bold;
}
.module_menu ul {
margin:0;
padding: 0;
list-style:none;
}
.module ul {
list-style:none;
padding-top: 10px;
margin:0;
padding-left: 0px;
}
.module li {
}
.module li a {
font-size:11px;
color:#ce2027;
text-decoration:none;
}
.module_menu li {
margin:0;
padding: 0;
position:relative;
text-decoration:none;
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #333;
}
.module_menu li:hover {
background-color:#f0f0f0;
}
.module_menu li li {
margin-left: 15px;
}
.module_menu li li:last-child {
border:none;
}
.module_menu li a {
text-decoration:none;
font-size:12px;
color:#333333;
line-height:24px;
padding:5px;
}
.moduletable{
}
div.module_menu, div.module {
margin-top:14px;
}
.module p {
font-size:10px;
}
/*module_menu*/
fieldset {
border:none;
padding:0;
margin:0;
}
input.inputbox {
width:188px;
margin-left:auto;
margin-right:auto;
}
input.button {
border: 1px solid #e0e0e0;
padding-top: 2px;
padding-right: 5px;
padding-bottom: 2px;
padding-left: 5px;
}
input#modlgn_remember {
width:10px;
border:none;
}
/* Main CSS */
img {
border:none;
}
.contentheading, h1 {
font-size:16px;
font-weight:bold;
}
h2,h3,h4,h5,h6 {
font-size:14px;
font-weight:bold;
}
p {
line-height: 18px;
}
a {
color: #626262;
text-decoration:underline;
}
.modifydate, .createdate, .small {
font-size:9px;
color:#b8151c;
}
.componentheading {
font-size:16px;
font-weight:bold;
color:#b8151c;
background-image: url(../images/contentp_line.gif);
background-position: right bottom;
margin-bottom: 10px;
margin-left: 2px;
background-repeat: no-repeat;
}
.componentheading a{
text-decoration:none;
font-size:16px;
font-weight:bold;
color: #626262;
background-image: url(../images/spacer.gif);
}
#footer {
clear:both;
margin-left:14px;
}
#footer_top {
background-image: url(../images/footer_top.jpg);
background-repeat: no-repeat;
background-position: top;
height:10px;
width:900px;
clear:both;
}
#footer_bot{
background-image: url(../images/footer_bot.jpg);
height:10px;
width:900px;
background-repeat: no-repeat;
background-position: bottom;
}
#footer_content {
padding:0px;
text-align:center;
background-image: url(../images/footer_bg.jpg);
clear:both;
margin-left:-14px;
background-repeat: repeat-y;
background-position: top;
}
#spacer {
width: 928px;
margin-left:auto;
margin-right:auto;
height:14px;
clear:both;
padding-top: 10px;
}
#copyright {
margin-top:10px;
text-align:center;
font-size:9px;
text-decoration:none;
line-height:18px;
}
#webmedie {
font-size:9px;
text-decoration:none;
line-height:18px;
}
.ultestClass{
width:0%;
position : absolute;
}
.testClassLi{
position: relative !important;
}
如果这不起作用，请告诉我