2014-08-31 63 views
1

好吧我正在做一个导航栏的样本,除了嵌套的li徘徊后,背景并没有完全覆盖空间。我的HTML/CSS有什么问题?

我的HTML代码都为:

<!DOCTYPE html> 
<html> 
    <head> 
     <link rel="stylesheet" href="style.css" /> 
     <title>NavBar</title> 
    </head> 

    <body> 
     <div id="nav"> 
      <ul> 
       <li><a href="#">Home</a></li><li> 
       <a href="#">About</a></li><li> 
       <a href="#">Contact</a> 
        <ul> 
         <li><a href="#">Email</a></li> 
         <li><a href="#">Phone</a></li> 
        </ul> 
       </li> 
      </ul> 
     </div> 
    </body> 
</html> 

我的CSS代码都为:

html, body { 
    margin: 100px; 
    padding:0px; 
    } 
#nav { 
    margin: 0px; 
    padding: 0px; 
    background-color: #909090; 
    font-familY: Courier; 
    font-size: 19pt; 
    color: #afc0ff; 
    } 
#nav ul ul { 
    display: none; 
    background-color: #909090; 
    } 
#nav ul li:hover > ul{ 
    margin: 0px; 
    padding:0px; 
    display:block; 
    position:absolute; 
    top: 100%; 
    left: 0px; 
    width: 100%; 
    } 
#nav ul li:hover { 
    background: #808080; 
    } 
#nav ul li { 
    margin: 0px; 
    padding: 10px 5px 10px; 
    list-style: none; 
    display: inline-table; 
    position: relative; 
    } 
#nav ul li a { 
    text-decoration: none; 
    color: #260026; 
    } 

我的问题是:

  • 我不能够让我的嵌套li的背景颜色覆盖整个ar就像你可以在电子邮件中看到的那样,整个区域都不会徘徊! Display Of the Code

JSFiddle

+0

我认为它是因为你的嵌套列表不显示为块。您需要将其更改为显示:block而不是inline-table。 – 2014-08-31 11:33:42

+0

@volumeone我在#nav ul li中看到了那里:hover> ul! – 2014-08-31 11:35:18

+0

我的意思是你的嵌套列表。列表中的列表。所以#nav ul li li li {display:block;} – 2014-08-31 11:36:52

回答

5

添加到您的CSS:

#nav ul ul li { 
    display:block; 
} 

Check JSFiddle Demo

+0

哇谢谢你,你确实帮了我:),但JSFiddle链接被破坏了。 – 2014-08-31 11:38:02