HTML Tidyを使用していてもナビゲーションメニューが機能しません

Question

私のウェブページ上でナビゲーションメニューが正しく動作するように時間があります。別の投稿で提案されたようなHTML Tidyを使ってエラーを修正し、使用したいナビゲーションバーのCSSコードを入力しました。最初はメニューが全く表示されていませんでしたが、私のレイアウトはそれが先行していたように未だタクト状態でした。だから私は、HTMLがきれいになったかどうかを見るためにHTML Tidyをやりました。私はその時、ナビゲーションメニューが表示されましたが、私のレイアウトはすべて並べ替えられていません。私のレイアウトの性質上、グラフィックバナーの上にナビゲーションメニューを置く必要があるのであれば好奇心をそそられていました。

それはHTML Tidyのをやって、メニューを表示した後、私のページに何をするかの例：

http://veterinarycare.atspace.cc/index3.html

私のページは、通常、どのように見えるかの例：

http://veterinarycare.atspace.cc

それを私はそれを把握することができないので、非常に狂っている。私は非常にシンプルなCSSナビゲーションメニューのようなものを使用しようとしましたが、うまく動作しません。どんな助け？

Answer 1

あなたはHTMLを整理するだけでは解決できない多くの悪い習慣に従事しています。 .extraの命名規則は意味をなさない、<span>の使用が不必要である、と.pngクラスがちょうど奇数である

<div class="extra"> 
    <span><img src="images/header-img.png" class="png" alt=""></span> 
</div> 

：

私のクイックスキャンで最悪の犯罪者がこれでした。

あなたはより良いHTML/CSSのプラクティスを学び、やり直す必要があります。いくつかの本を読んで、Twitter Bootstrapから学び、具体的かつ明確に定義された問題にぶつかるとStackOverflowに傾けてください。

Answer 2

あなたのHTMLは非常に間違った

CSSファイルからこのスクリプトを削除して、頭の中でそれを置くか、別のJSファイル内

sfHover = function() { 
var sfEls = document.getElementById("nav").getElementsByTagName("LI"); 
for (var i=0; i<sfEls.length; i++) { 
    sfEls[i].onmouseover=function() { 
     this.className+=" sfhover"; 
    } 
    sfEls[i].onmouseout=function() { 
     this.className=this.className.replace(new RegExp(" sfhover\\b"), ""); 
    } 
} 
} 
if (window.attachEvent) window.attachEvent("onload", sfHover); 

スクリプトが#navをターゲットにされ、ノーありあなたのhtmlでid = 'nav'を#nav divに入れてください。