如何在CSS中擴展導航

-1

我有一個在1000px的div;和一個也是1000px的導航欄;但它不會像div一樣擴大。如何在CSS中擴展導航

請幫助...

[index.html的]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<link rel="icon" href="favicon.ico" type="image/x-icon"> 
<link href="favicon.ico" rel="shortcut icon" type="image/x-icon" /> 
<title>[phantzm]</title> 
<link rel="stylesheet" type="text/css" href="style.css"> 
<center> 
<div class="banner"> 
<IMG SRC="logo.png" class="logo" WIDTH=100 HEIGHT=100 ALT="pZ"> 
</div> 
<center> 
<div id="wrapper"> 
<div id="navMenu"> 
<ul> 
<li> 
<a href="#">fun stuff</a> 
<ul> 
<li><a href="#">jokes</a></li> 
<li><a href="#">riddles</a></li> 
<li><a href="#">facts</a></li> 
</ul><!-- end of Second List --> 
<li> 
<a href="#"> my work </a> 
</li> 
<li> 
<a href="#"> my favourite songs </a> 
</li> 
<li> 
<a href="#"> my favourite links </a> 
</li> 
<li> 
<a href="#"> about me </a> 
</li> 
<li> 
<a href="#"> contact me </a> 
<ul> 
<li><a href="#">phone</a></li> 
<li><a href="#">e-mail</a></li> 
<li><a href="#">mail</a></li> 
</ul><!-- end of Second List --> 
</li> 
</li><!-- end of List Item --> 
</ul><!-- end of Unordered List --> 
</div><!-- end of navMenu div --> 
</div><!-- end of wrapper div--> 
</center> 
</head> 
<body bgcolor="#FFCECE"> 
</body> 
</html>

[style.css文件]

body { 
    background: SILVER; 
    margin: 0; 
    padding: 0 auto; 
} 

.banner { 
    background: blue; 
    width: 1000px; 
    height: 70px; 
} 
.logo { 
    margin-top: 10px; 
    margin-right: 500px; 
} 

#navMenu { 
    margin: 0; 
    padding: 0; 
    line-height: 30px; 
    width: 1000px; 
} 

#navMenu ul { 
    margin: 0; 
    padding: 0; 
    border: 1px white; 
} 

#navMenu li:hover { 
    font-weight:normal; 
    text-transform: capitalize; 
    background:silver; 
} 

#navMenu ul li { 
    margin: 0; 
    padding: 0; 
    list-style:none; 
    float: left; 
    position: relative; 
    background: #4B8EE0; 
    border: 1px white; 
    border-left: 1px solid #0000ff; 
    border-right: 1px solid #000ff; 

} 

#navMenu ul: hover { 
    text-transform: capitalize; 

} 

#navMenu ul li a { 
    text-align: center; 
    font-family: "Arial"; 
    text-decoration: none; 
    height: 30px; 
    width: 150px; 
    display: block; 
    color: white; 
} 

#navMenu ul ul { 
    position: absolute; 
    visibility: hidden; 
    top:30px; 
    border: 1px white; 
} 

#navMenu ul li:hover ul { 
    visibility: visible; 
}

我已經加入了風格和指數的代碼。由於你可以看到橫幅和navmenu都有1000px;

來源

2013-02-24 Sef Beezy

顯示你的代碼和HTML。我們無法從這裏看到您的屏幕。 – JohnFx 2013-02-24 07:11:55

如果你把你的代碼放在這裏或者www.jsfiddle.net會更好。 – coder 2013-02-24 07:12:40

@coder;我已經添加了代碼感謝球員 – 2013-02-24 07:19:21

只要改變你CSS這樣的：Live Demo

#navMenu ul li { 
    margin: 0; 
    padding: 0; 
    list-style:none; 
    float: left; 
    position: relative; 
    background: #4B8EE0; 
    border: 1px white; 
    border-left: 1px solid #0000ff; 
    border-right: 1px solid #000ff; 
    width:165.6px; 
}

165.6爲（1000 - 5）/ 6（約）

來源

2013-02-24 08:01:05 ATOzTOA