IE8でCSSドロップダウンメニューが機能しない

CSSでドロップダウンメニューを作成しました。IE8でCSSドロップダウンメニューが機能しない

Firefox、Chrome、IE8では、ドロップダウンメニューが正しく表示されます。しかしIE8では、ドロップダウンから選択することができません。それはすぐに

CSSファイル..消える...

ul { 
/* font-family: Arial, Verdana; 
    font-size: 14px;*/ 
    margin: 0; 
    padding: 0; 
    list-style: none; 
} 
ul li { 
    display: block; 
    position: relative; 
    float: left; 
} 
li ul { display: none; } 
ul li a { 
    display: block; 
    text-decoration: none; 
    color: #ffffff; 
    border-top: 1px solid #ffffff; 
    padding: 5px 15px 5px 15px; 
    background: #2C5463; 
    margin-left: 1px; 
    white-space: nowrap; 
} 
ul li a:hover { background: #617F8A; } 
li:hover ul { 
    display: block; 
    position: absolute; 
    left:none; 
} 
li:hover li { 
    float: none; 
    font-size: 11px; 
} 
li:hover a { background: #617F8A; } 
li:hover li a:hover { background: #95A9B1; }

〜

HTML（ここではPHPファイル...）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<HTML xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" lang="en-gb" > 
<HEAD> 
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> 
<TITLE></TITLE> 
<link rel="stylesheet" href="menu.css" type="text/css"> 
</HEAD> 
<BODY> 
<div id="header" class="top-bottom"> 
<ul id="menu"> 
    <li><a href="">Home</a></li> 
    <li><a href="">Profile</a> 
    <ul> 
    <li><a href="./edit_profile.php">Edit Profile</a></li> 
    <li><a href="">View Profile</a></li> 
    <li><a href="">Add Education</a></li> 
    </ul> 
    </li> 
    <li><a href="">My Connections</a></li> 
    <li><a href="">Change Password</a></li> 
</ul> 
</div>

出典

2012-04-12 killben

は、いくつかのコードを見てみましょう。 –

いくつかのコードを投稿し、関連する部分を[jsfiddle]（http://jsfiddle.net/）にして、問題を適切に説明してください。ガイドラインを確認してください。 http://stackoverflow.com/questions/how-to-ask – sg3s

killben - コードを見た後です。すべてそれをしてください。 =） –

あなたのスタイルの多くはによって継承されていましたあなたのサブメニューは、あなたの最初のレベルとサブメニューを適切にターゲットにするために、より具体的なセレクターを追加する必要があります。また、ホバー上のサブメニューを絶対的に配置していました。メインステートメントではなく、ステートに設定する必要があります。ここでは固定されたバージョンです：

CSS

ul { 
/* font-family: Arial, Verdana; 
    font-size: 14px;*/ 
    margin: 0; 
    padding: 0; 
    list-style: none; 
} 
#menu > li { /* used the child selector here to properly target your first level menu items */ 
    position: relative; 
    float: left; 
} 
#menu li ul { 
    display: none; 
    position: absolute; /* moved the positioning to the main declaration instead */ 
    left:0; /* fixed this propery, there is no left:none as you had it before */ 
    top:100%; 
} 

#menu a { 
    display: block; 
    text-decoration: none; 
    color: #ffffff; 
    border-top: 1px solid #ffffff; 
    padding: 5px 15px 5px 15px; 
    background: #2C5463; 
    margin-left: 1px; 
    white-space: nowrap; 
} 
#menu li a:hover { background: #617F8A; } 

#menu li:hover ul { 
    display: block; 
} 

#menu li:hover li { 
    font-size: 11px; 
} 
#menu li:hover a { background: #617F8A; } 
#menu li:hover li a:hover { background: #95A9B1; }

出典

2012-04-12 22:07:39

IE8でCSSドロップダウンメニューが機能しない

答えて

関連する問題