我有一个CSS代码
body
{
font-family: 'Verdana', 'Verdana', sans-serif;
font-size: 15px;
}
div.clear { clear: both; }
#menubar { margin: 40px; position: ;}
div.menu, div.menu ul { width: 100%; }
div.menu ul
{
margin: 2px;
padding: 0;
list-style: decimal;
}
div.menu ul, div.menu li { float: left; }
div.menu li { display: inline; }
div.menu li a
{
border-radius: 5px;
background: #BDBDBD;
text-decoration: none;
border: solid 2px gray;
display: block;
color: black;
}
div.menu a.first
{
background-position: right 0;
}
div.menu a.last
{ background-position: right 0; }
div.menu a span
{
height: 30px;
line-height: 30px;
color: black;
display: block;
padding: 3px;
}
div.menu li:hover a { background-position: -10px -30px; background: #d8dbd9;}
div.menu li a:active { background-position: -10px -82px; }
div.menu li:hover a.first { background-position: right -30px; }
div.menu li a.first:active { background-position: right -52px; }
div.menu li:hover a.last { background-position: right -30px; }
div.menu li a.last:active { background-position: right -52px; }
div.menu div.menu
{
position: absolute;
display: inline-block;
margin-left: 170px;
margin-top: -40px;
}
div.menu div.menu div.menu
{
margin-top: -40px;
margin-left: 400px;
display: block;
}
div.menu div.menu ul, div.menu div.menu li, div.menu div.menu li a
{
float: none;
}
div.menu div.menu li a
{
display: block;
}
div.menu div.menu li a
div.menu div.menu div.menu li a
{
background: none;
border: #FF8040;
margin: 2px;
}
div.menu div.menu span,
div.menu div.menu li:hover li span,
div.menu div.menu li:hover li:hover li span
{
border-radius: 5px;
background: #BDBDBD;
display: block;
color: black;
padding: 3px;
}
div.menu div.menu li:hover span,
div.menu div.menu li:hover li:hover span,
div.menu div.menu li:hover li:hover li:hover span
{
background-color: #d8dbd9;
}
div.menu div.menu a span
{
display: block;
}
div.menu div.menu { display: none; }
div.menu li:hover div.menu { display: inline-block; }
div.menu li:hover div.menu div.menu { display: none; }
div.menu div.menu li:hover div.menu { display: inline-block; }
div.menu li:hover div.menu div.menu div.menu { display: none; }
div.menu div.menu div.menu li:hover div.menu { display: block; }
div.menu li:hover div.menu div.menu div.menu div.menu { display: none; }
div.menu div.menu div.menu div.menu li:hover div.menu { display: block; }
HTML index.html代码：
<html>
<head>
<title>title</title>
<link rel="stylesheet" href="index_style.css" type="text/css"/>
</head>
<body>
<?php // setting header here ?>
<div id="menubar" class="menu">
<ul>
<li>
<a target="_blank" href="somepage.php" class="no-children"><span>1</span></a>
</li>
</ul>
</ul>
<ul>
<ul>
<li>
<a target="_blank" href="#" class="has-children"><span>2</span></a>
<div class="menu">
<ul>
<li>
<a target="_blank" href="somepage.php" class="has-children"><span>3</span></a>
</li>
<li>
<a href="#" class="has-children"><span>4</span></a>
<div class="menu">
<ul>
<li>
<a href="somepage.php"><span>5</span></a>
</li>
<li>
<a href="somepage.php" class="has-children"><span>6</span></a>
</li>
</ul>
<div class="clear"></div>
</div>
</li>
</ul>
<div class="clear"></div>
</div>
</li>
</ul>
<ul>
<li>
<a target="_blank" href="somepage.php" class="no-children"><span>7</span></a>
</li>
</ul>
<ul>
<li>
<a target="_blank" href="somepagephp" class="no-children"><span>8</span></a>
</li>
</ul>
<div class="clear"></div>
</div>
</body>
</html>
但是第二级和第三级菜单项没有正确显示，它们有一个整页，我需要一个内容的widh。试着让它成为一整天。感谢。
答案 0 :(得分：0)
问题出在分离div.menu和div.menu li a。只需在div.menu部分设置div的位置，并在div.menu li a部分设置它的大小。这取决于经验。