我刚开始创建一个网站,一切都很完美,没有菜单......
我的菜单有一些问题:“顶级”还可以,但“二级”/下拉菜单不好,我不知道如何解决它们。他们不在“他们的父母”之下,他们的宽度和高度都不好。我想看到填充或特定宽度,例如所有子菜单的 100 像素和所有子菜单的高度 20 像素,但我无法让它工作。
HTML
<div>
<ul type="none">
<li class="dropdown"><a class="nav" href="#">Home</a>
<ul class="dropdownitems">
<li><a class="dropdownitem" href="#">Home Style1</a></li>
<li><a class="dropdownitem" href="#">Home Style2</a></li>
<li><a class="dropdownitem" href="#">Home Style3</a></li>
<li><a class="dropdownitem" href="#">Home Style4</a></li>
</ul>
</li>
<li class="dropdown"><a class="nav" href="#">Other</a>
<ul class="dropdownitems">
<li><a class="dropdownitem" href="#">Other1</a></li>
<li><a class="dropdownitem" href="#">Other2</a></li>
</ul>
</li>
</ul>
</div>
CSS
.nav {font-family: times new roman, arial, "ms sans serif", sans-serif; text-decoration: none; color:#484848; font-size:17px;}
.nav:visited { text-decoration: none; color:black;}
.nav:focus { text-decoration: none; color:black;}
.nav:hover, nav:active { text-decoration: none; color:black;}
.nav:hover {
font-family: times new roman, arial, "ms sans serif", sans-serif;
font-size: 17px;
color: orangered;
text-decoration: none;
border-bottom: solid 3px orangered;
}
.dropdownitems {
display:none;
}
li.dropdown:hover > ul.dropdownitems {
display:block;
padding: 10px;
position: absolute;
left: 0;
clear:both;
width: 100px;
}
.dropdownitem {
font-family: times new roman, arial;
text-decoration: none;
color:black;
background-color:#F0F0F0;
}
.dropdownitem:visited { text-decoration: none; color:black;}
.dropdownitem:focus { text-decoration: none; color:black;}
.dropdownitem:hover, nav:active { text-decoration: none; color:black;}
.dropdownitem:hover {
font-family: times new roman, arial, "ms sans serif", sans-serif;
font-size: 16px;
color: black;
text-decoration: none;
border-bottom: solid 3px orangered;
}
span div ul
{
list-style: none;
margin: 0px;
padding: 0px 10px 0px 0px;
width: 100%;
}
.dropdown
{
display: block;
float: left;
width:60px;
}
请看一下:http: //jsfiddle.net/9afrX/1/
如果你检查它,你会看到所有的问题,如果有人可以纠正它,请做,我将非常感激。谢谢!