使用填充時，如何在列表項下刪除此行？

-2

我有一個問題，當我添加填充到列表項「關於我們」時，它添加了填充到列表項目中的一行背景顏色。這很難解釋，但是如果你將代碼複製並粘貼到一個html文檔中，並在瀏覽器中打開它，它將更有意義。我對這些論壇太陌生了，因爲它讓我發佈圖片。使用填充時，如何在列表項下刪除此行？

我很抱歉，但我剛剛進入編碼，所以我正在努力一點點。

謝謝！

<!--Begin HTML--> 
<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" href="stylesheet.css"> 
<meta charset="utf-8"> 
<title>Untitled Document</title> 
</head> 

<body> 
    <header> 
    <img src="Bend-oregon-dentist.jpg"> 
    <ul id="nav"> 
     <li>Home</li> 
     <li>About Us 
     <ul> 
       <li>Our Services</li> 
       <li>Our Office</li> 
      </ul> 
     </li> 
    </ul>    
    </header> 

</body> 
</html> 
<!--End HTML--> 

/*BEGIN CSS*/ 
body { 
margin: 0; 
} 
header { 
background: rgba(8,118,71,1.00); 
    height: 175px; 
} 
#nav { 

    list-style: none; 
    text-align: center; 
    padding-bottom: 0px; 
    margin-bottom: 0px; 

} 
#nav li { 
    margin-left: 10px; 
    display: inline; 
    color: white; 
    font-family: verdana; 
    background: rgba(3, 78, 3, 0.96); 
    padding: 2px; 
    border-top-left-radius: 15px; 
    border-top-right-radius: 15px; 
} 
#nav ul{ 
    list-style: none; 
} 
#nav ul li { 
    display: none; 
} 
#nav li:hover ul { 
    height: 20px; 
} 
#nav li:hover ul li { 
    margin-left: 899px; 
display: block; 
background: rgba(174,175,185,0.9); 
    width: 79px; 
    border: 2px solid black; 
    border-bottom: 1px solid black; 
    text-align: left; 
    color: black; 
    font-size: 12px; 
} 
    /*END CSS*/

來源

2014-06-06 user3713300

cssdeck這裏：http://cssdeck.com/labs/full/z2cfzlc1 – APerson

不知道你得到了從代碼，但你應該谷歌的CSS下拉菜單教程。 –

識別「填充」和「空白」之間的差異很重要。填充添加內部空間和元素邊框，因此增加了背景顏色。邊距增加了元素邊界外的空間。 –

編輯：

你的菜單需要很多chages。看到this updated Fiddle

#nav { 
    list-style: none; 
    text-align: center; 
    padding-bottom: 0px; 
    margin-bottom: 0px; 
} 
#nav li { 
    margin-left: 10px; 
    display: block; 
    color: white; 
    font-family: verdana; 
    background: rgba(3, 78, 3, 0.96); 
    padding: 10px; 
    border-top-left-radius: 15px; 
    border-top-right-radius: 15px; 
} 
#nav ul { 
    list-style: none; 
} 
#nav li { 
    position:relative; 
    float:left; 
} 
#nav li > ul { 
    position:absolute; 
    top: 38px; 
    left: -50px; 
    width:200px; 
    display: none; 
} 
#nav li:hover > ul { 
    display: block; 
    text-align: left; 
    color: black; 
    font-size: 12px; 
    height:auto; 
}

來源

2014-06-06 00:19:08

使用填充時，如何在列表項下刪除此行？

回答

相關問題