如何在CSS上的菜單下進行邊界聚焦？

我很新的CSS，我想學習使用CSS有效，但我現在有幾個問題/問題，我想在我的菜單下做灰色邊框，但是當我放大和縮小邊框的行爲如此奇怪嗎？對不起，我的代碼不是很乾淨。我怎樣才能修改我的代碼以獲得更好的地位？如何在CSS上的菜單下進行邊界聚焦？

HTML

<html> 
<head> 
<link href="Style.css" rel="stylesheet" type="text/css"> 
<style type="text/css"> 
span{ 
    color:#d00000; 
    text-decoration:underline; 
} 
#home{ 
    background-color:#0000CC; 

} 
span{ 
    font-style:italic; 
} 
</style> 
</head> 
<body> 

<div id="wrapper"> 
<div id="header"> 

<ul> 
    <li><a href="#Home" id="home"><span>Home</span></a></li> 
    <li><a href="#link2">link2</a></li> 
    <li><a href="#link3">link3</a> 
     <ul> 
     <li><a href="#sub">sub</a></li> 
     <li><a href="#sub2">sub2</a></li> 
     </ul> 
    </li><!---End of DropDown Videos menu---> 
    <li><a href="#link4">link4</a></li> 
    <li><a href="#link5">link5</a></li> 
</ul><!---End of nav elements---> 
<br class="clearFloat"> 
</div><!---End of header---> 
</div><!---End of wrapper---> 
<div id="grey"> 
</body> 
</html>

CSS

#wrapper{ 
    float:center; 
} 
#grey{ 
    border-bottom:250px solid #a0a0a0; 
    padding:0px; 
    margin-left:203px; 
    margin-right:387px; 

} 

#header{ 
    margin:auto; 
    padding:0px; 
    clear:both; 
} 
#header ul{ 
    margin:0px; 
    padding:0px; 
    line-height:30px; 

} 
#header li{ 
    margin:0px; 
    padding:0px; 
    list-style: none; 
    float:left; 
    position:relative; 
    background-color:#000099; 
    border:1 solid #0000CC; 
    top:px; 
    right:-15%; 
} 

#header ul li a{ 
    text-align:center; 
    font-family:fantasy; 
    text-decoration:none; 
    display:block; 
    height:30px; 
    width:150px; 
    color:black; 
} 
#header ul ul li a{ 
    color:#0000cc; 

} 
#header ul ul li{ 
     right:0%; 
} 

#header ul ul{ 
    margin:0px; 
    padding:0px; 
    position:absolute; 
     opacity: 0; 
    visibility: hidden; 
    transition: all .1s ease-in; 
} 
#header ul li:hover ul { 
    visibility:visible; 
    opacity:1 ; 
} 
#header ul li:hover { 
    background-color:blue; 
} 
#header ul li:hover a { 
color:black; 
} 
#header ul ul li:hover a { 
color:#d00000; 
} 
.clearfloat{ 
    clear:both; 
    margin:0px; 
    padding:0px; 

}

來源

2013-06-24 Superninjaa

沒有float：center;在css –

是的，我知道這只是一個測試，我忘了刪除它。 – Superninjaa

任何人都可以幫忙嗎？ – Superninjaa

沒有完全改寫你的代碼，只是覺得每個 '禮' ...... 增加了下邊框的刪除你的ID = '灰色'，並添加你的邊界到你的#header li {}。刷新但請注意你的'sub'菜單現在每個都有一個底部邊框。他們繼承了它，所以你需要把它們關閉......因此，將border-bottom：none添加到＃header ul ul li聲明中。現在

...如果我們做了你的代碼的快速返工......

HTML

<div id="wrapper"> 
<div id="header"> 
    <div id="navwrapper"> 
     <ul id="nav"> 
      <li><a href="#Home" id="home"><span>Home</span></a></li> 
      <li><a href="#link2">link2</a></li> 
      <li><a href="#link3">link3</a> 
       <ul class="sub"> 
        <li><a href="#sub">sub</a></li> 
        <li><a href="#sub2">sub2</a></li> 
       </ul> 
      </li> 
      <li><a href="#link4">link4</a></li> 
      <li><a href="#link5">link5</a></li> 
     </ul> 
    </div> 
</div>

CSS

html, body { margin:10px;padding:0; } 

#wrapper, #header, #navwrapper { margin: 0 auto 0 auto; } 

#nav { 

    padding:0; 
    margin: 0 auto 0 auto; 
    line-height:30px; 
    height:30px; 
    list-style:none } 

#nav li { 
    border-bottom: solid #a0a0a0 10px; 
    margin:0; 
    padding:0; 
    float:left; 
    background-color:#000099; 
    } 

#nav a { 
    text-align:center; 
    font-family:fantasy; 
    text-decoration:none; 
    display:block; 
    height:30px; 
    width:150px; 
    color:black; 
} 

#nav li:hover { background-color:blue; } 

#nav li:hover .sub { 
    visibility:visible; 
    opacity: 1; 
} 

#nav .sub a { color:#00c; } 

#nav .sub { 
    margin:0; 
    padding:0; 
    position:absolute; 
    opacity: 0; 
    visibility: hidden; 
    transition: all .1s ease-in; 
    list-style: none; 
} 

#nav .sub li { clear:both; border-bottom: none; }

使用更多命名約定無線你的子菜單比通過CSS深入鑽研更安全。您還需要注意，任何頂級CSS聲明都是由其中的所有子級繼承的。如果你聲明#nav li是黑色的，但希望所有'sub'列表元素都是藍色的，那麼需要明確說明......在CSS文檔中的初始聲明之後。

希望這對我有幫助...

來源

2013-06-24 15:37:10 beauXjames

謝謝，真的工程和清理的東西:) – Superninjaa

標記爲答案，請 – beauXjames

如何在CSS上的菜單下進行邊界聚焦？

回答

相關問題