鏈接工作之前，但在最近更新後失敗？

我在工作之前就已經有了導航，當你在導航欄上方懸停時，它會突出顯示紅色並且可以點擊（將你帶到另一個URL）。插入其他代碼後，它似乎不再有效了..有什麼建議嗎？鏈接工作之前，但在最近更新後失敗？

HTML

<body> 
<div id="page-wrap"> 
    <div id="header"> 
     <img src="images/header.png" /> 
    </div> 
    <img src="images/navbar.png" /> 
    <ul id="nav"> 
     <li><a href="http://www.voyage-us.com">Home</a></li> 
     <li><a href="http://www.voyage-us.com/xenforo/upload/index.php">Forums</a></li> 
     <li><a href="http://www.google.com">Members</a></li> 
     <li><a href="http://www.google.com">Streams</a></li> 
     <li><a href="http://www.google.com">Contact Us</a></li> 
    </ul> 
    <div id="mainbody"> 
     <img src="images/mainbody.png" /></div> 

    <div class="news1"> 
     <img src="images/news1.png" /></div> 

    <div class="teamspeak"> <!--Teamspeak IMG--> 
     <img src="images/teamspeak.png" /></div> 

    <div id="ts3viewer_1037062" /></div> <!-- Teamspeak Widget --> 

     <script type="text/javascript" src="http://static.tsviewer.com/short_expire/js/ts3viewer_loader.js"></script> 

     <script type="text/javascript"> 
     <!-- 
     var ts3v_url_1 = "http://www.tsviewer.com/ts3viewer.php?ID=1037062&text=000000&text_size=12&text_family=2&js=1&text_s_color=ffffff&text_s_weight=bold&text_s_style=normal&text_s_variant=normal&text_s_decoration=none&text_s_color_h=ffffff&text_s_weight_h=bold&text_s_style_h=normal&text_s_variant_h=normal&text_s_decoration_h=underline&text_i_color=ffffff&text_i_weight=normal&text_i_style=normal&text_i_variant=normal&text_i_decoration=none&text_i_color_h=ffffff&text_i_weight_h=normal&text_i_style_h=normal&text_i_variant_h=normal&text_i_decoration_h=underline&text_c_color=ffffff&text_c_weight=normal&text_c_style=normal&text_c_variant=normal&text_c_decoration=none&text_c_color_h=ffffff&text_c_weight_h=normal&text_c_style_h=normal&text_c_variant_h=normal&text_c_decoration_h=underline&text_u_color=ffffff&text_u_weight=bold&text_u_style=normal&text_u_variant=normal&text_u_decoration=none&text_u_color_h=ffffff&text_u_weight_h=bold&text_u_style_h=normal&text_u_variant_h=normal&text_u_decoration_h=none"; 
     ts3v_display.init(ts3v_url_1, 1037062, 100); 
     --> 
     </script> 

    <div id="footer"> 
     <p>&copy;2014 Rythmn Designs<p> 
</div> 
</body>

CSS

body 
{ 
margin: 0px; 
padding: 0px; 
background: url("http://puu.sh/6RlKi.png") 
} 

.clear 
{ 
clear:both; 
} 

#page-wrap 
{ 
width: 1019px; 
margin: 0 auto; 
} 

#header 
{ 
width:100%; 
text-align: center; 
display: block; 
} 

#nav 
{ 
height: 0.1px; 
list-style: none; 
padding-left: 14px; 
text-align: center; 
padding-bottom: 0px; 
margin: -14px; 
margin-top: -15px; 
} 

#nav li a 
{ 
position:relative; 
top: -12px; 
display: block; 
width: 100px; 
float: left; 
color: white; 
font-size: 14.09px; 
text-decoration: none; 
font-family:"BankGothic Md BT" 
} 

#nav li a:hover, #nav li a:active 
{ 
color: red; 
} 

#mainbody 
{ 
vertical-align:top; 
position:relative 
} 

.news1 
{ 
position: absolute; 
top: 435px; 
right: 815px 
} 

.teamspeak 
{ 
position: absolute; 
top: 435px; 
right: 470px 

} 

#ts3viewer_1037062 
{ 
position:absolute; 
top: 465px; 
right: 478px; 
width: 290px; 
height:190px; 
overflow:auto; 
} 

#footer 
{ 
background: #181818; 
color: white; 
padding: 20px 0 20px 0; 
text-transform: uppercase; 
border-top: 15px solid #828080; 
text-align: center; 
font-family:"BankGothic Md BT"; 
font-size: 12px; 
position: relative; 
}

這裏是的jsfiddle玩弄 - http://jsfiddle.net/rdL2m/

來源

2014-02-16 user3294450

爲什麼widget中的代碼被註釋掉了？ – pdjota

沒有線索 - 從TS網站複製它，但它似乎工作。 – user3294450

，正是因爲他們出現在#nav應用這些樣式：

#nav { 
    margin: 0; 
    padding: 0 0 0 25px; 
    z-index: 100; 
    position: absolute; 
    top: 352px; 
    list-style: none; 
}

不應包含任何其他內容。只有你在上面看到的應該應用於#nav。現在

，在你的 '#nav李一' 的風格，刪除這些完全：

{ 
    top: -12px; 
    display: block; 
    float: left; 
}

我們貴麗的，加：

#nav li { 
    display: inline-block; 
}

你的菜單應該是在偉大的形狀。沒有你所要做的就是對左側或右側的元素應用左/右填充以獲得所需的鏈接間距。

來源

2014-02-16 01:13:27

最後的div是用於換頁的。我嘗試在頁腳後面加上一個結尾div，但沒有任何變化。 – user3294450

我也擺脫了在導航上的-14px的邊距和-15px的margin-top。一旦我刪除這些，懸停功能工作正常。 –

邊距是導航欄頂部的原因。如果我把它們拿出來，它就在下面。 – user3294450

嘗試添加標題中的菜單項div並且還爲導航欄製作單獨的div。您也忘記關閉頁腳div。

來源

2014-02-16 01:18:31

這很有效，但現在我將不得不重新定位一切。這是唯一的方法嗎？ – user3294450

這是一個結構良好的方式。我個人建議你遵循這種方式，並保持簡單和乾淨 –

鏈接工作之前，但在最近更新後失敗？

回答

相關問題