Question

我是CSS的新手，我在使用UL菜单时遇到了一些问题。这是代码：

html,body{
    margin: 0;
    padding: 0;
    background-color:#EFEFEF;
    font-family:Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;  
}
#header{
    height:60px;
    width:100%;
    background-color:black; 
}
.container{
    margin: 0 auto; 
    width:63%;
    height:60px;s
}
#nameArea{
    width:18%;
    height:60px;
    margin-left:2%;
    color:white;

    float:left;
}
#nameArea label{
    line-height:50px;   
    font-size:20px;
}
#menuArea{
    width:58%;
    height:60px;
    float:right;
    position: relative;

}
#menuArea ul{
    position: fixed;
    list-style:none;

}
#menuArea li{
    display:inline-block;
    color: white;
    margin-left:30px;
}
#menuArea a{
    text-decoration:none;

    color:#B7B7B7;  
}
#menuArea a:hover{
    color:white;    
}

当页面最大化时它会起作用但是当我尝试调整页面大小时它会发疯。我试过没有position: relative。有什么想法吗？

编辑：这是我的HTML代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<div id = "header">
    <div class="container"> 
        <div id="nameArea">
            <label> namerandom </label>
        </div>
        <div id="menuArea">
            <ul>
                <li><a href="#">Menu</a></li>
                <li><a href="#">Menu</a></li>
                <li><a href="#">Menu</a></li>
                <li><a href="#">Menu</a></li>
                <li><a href="#">Menu</a></li>
            </ul>                                                            
        </div>
    </div>
</div>
<body>
</body>
</html>

JSFiddle

调整页面大小时，CSS UL菜单出现问题

0 个答案: