2014-06-06 2 views
-2

J'ai un problème lorsque j'ajoute un remplissage à l'élément de la liste "À propos de nous" où il ajoute une ligne de couleur d'arrière-plan lorsque j'ajoute un remplissage à l'élément de la liste. C'est difficile à expliquer, mais si vous copiez et collez le code dans un document html et l'ouvrez dans un navigateur, cela aura beaucoup plus de sens. Je suis trop nouveau sur ces forums pour que je puisse poster une image. Je m'excuse, mais je commence tout juste à coder et j'ai donc un peu de difficulté.Comment est-ce que je peux me débarasser de cette ligne ci-dessous l'article de liste en utilisant le remplissage?

Merci!

<!--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*/ 
+0

cssdeck ici: http://cssdeck.com/labs/full/z2cfzlc1 – APerson

+0

ne sais pas où vous avez obtenu ce code de google, mais vous devriez tutoriels pour les menus déroulants css. –

+0

Il est important de reconnaître la différence entre 'padding' et' margin'. Rembourrage ajouter de l'espace à l'intérieur et des éléments frontière, d'où la couleur de fond supplémentaire. La marge ajoute de l'espace à l'extérieur de la bordure des éléments. –

Répondre

0

EDIT:

Votre menu a besoin de beaucoup chages. voir 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; 
} 
Questions connexes