1

我刚开始创建一个网站，一切都很完美，没有菜单......

我的菜单有一些问题：“顶级”还可以，但“二级”/下拉菜单不好，我不知道如何解决它们。他们不在“他们的父母”之下，他们的宽度和高度都不好。我想看到填充或特定宽度，例如所有子菜单的 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/

如果你检查它，你会看到所有的问题，如果有人可以纠正它，请做，我将非常感激。谢谢！

4

2 回答 2

1

position: absolute;从你的 CSS 块中删除li.dropdown:hover > ul.dropdownitems

于 2013-08-31T18:21:13.713 回答
1

您正在使用position:absolute;下拉菜单，您应该将其设为父级list(li) 

position:relative

http://jsfiddle.net/9afrX/13/

于 2013-08-31T18:31:12.537 回答