2012-11-29 101 views
0

我正嘗試在博客中向我的博客添加一個css下拉菜單。Blogger css下拉菜單隻在IE中將子菜單項移至右側

我使用一些代碼,我發現了一個下拉菜單。它適用於Firefox和Chrome,但不適用於IE。我正在使用IE9,但有一個元標記來模擬IE7。在IE中,子菜單項被移到右側,而不是直接出現在主菜單項下面。 (使用我的代碼作爲例子,「2010 Interviews」,「2011 Interviews」等等,當我徘徊的時候,並沒有直接在「Radio Interviews」之下,他們正確地向右移動

我一直在試圖解決這個問題,儘管我已經爲解決方案做了大量的研究,但我並不理解,也不能很好地解決這個問題,所以我對編碼並不擅長,我希望有人能夠幫助我,否則我只想去做放棄。

我想離開DOCTYPE和meta標籤原樣。

下面是HTML(我已添加到HTML/JavaScript的小工具)。

<div id="nav"> 
<ul> 
    <li><a href="http://brunomarstester.blogspot.com/">Home</a></li> 
    <li><a href="#">Award Shows</a> 
    <ul> 
    <li><a href="#">AMAs</a></li> 
    <li><a href="#">BET Awards</a></li> 
    <li><a href="#">Grammys</a></li> 
    <li><a href="#">MTV VMAs</a></li> 
    <li><a href="#">Other Award Shows</a></li> 
    </ul> 
    </li> 
    <li><a href="#">Hooligan Band</a> 
    <ul> 
    <li><a href="#">Dwayne Dugger II</a></li> 
    <li><a href="#">Eric Hernandez</a></li> 
    <li><a href="#">Jamareo Artis</a></li> 
    <li><a href="#">James King</a></li> 
    <li><a href="#">John Fossitt</a></li> 
    <li><a href="#">Kameron Whalum</a></li> 
    <li><a href="#">Phredley Brown</a></li> 
    </ul> 
    </li> 
    <li><a href="#">Radio Interviews</a> 
    <ul> 
    <li><a href="#">2010 Interviews</a></li> 
    <li><a href="#">2011 Interviews</a></li> 
    <li><a href="#">2012 Interviews</a></li> 
    <li><a href="#">2013 Interviews</a></li> 
    </ul> 
    </li> 
    <li><a href="#">TV/Other Interviews</a> 
    <ul> 
    <li><a href="#">2010 Interviews</a></li> 
    <li><a href="#">2011 Interviews</a></li> 
    <li><a href="#">2012 Interviews</a></li> 
    <li><a href="#">2013 Interviews</a></li> 
    </ul> 
    </li> 
    <li><a href="#">Performances</a> 
    <ul> 
    <li><a href="#">Award Shows</a></li> 
    <li><a href="#">Concerts</a></li> 
    <li><a href="#">Night Clubs</a></li> 
    <li><a href="#">Radio Stations</a></li> 
    <li><a href="#">Special Events</a></li> 
    <li><a href="#">Miscellaneous</a></li> 
    </ul> 
    </li> 
    <li><a href="#">TV</a> 
    <ul> 
    <li><a href="#">Guest Star</a></li> 
    <li><a href="#">Miscellaneous</a></li> 
    </ul> 
    </li> 
    <li><a href="#">International</a> 
    <ul> 
    <li><a href="#">Australia</a></li> 
    <li><a href="#">Brazil</a></li> 
    <li><a href="#">Canada</a></li> 
    <li><a href="#">Philippines</a></li> 
    <li><a href="#">UK</a></li> 
    <li><a href="#">Other</a></li> 
    </ul> 
    </li> 
</ul> 
</div> 

這裏是模板的代碼的頂部&頭:

<?xml version="1.0" encoding="UTF-8" ?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'> 
<head> 
<!--BELOW ADDED BY CW--> 
    <meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/> 
<!--ABOVE ADDED BY CW--> 

<title><data:blog.pageTitle/></title> 
<b:include data='blog' name='all-head-content'/> 
<link href='http://fonts.googleapis.com/css?family=Droid+Sans:regular,bold' rel='stylesheet' type='text/css'/> 
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/> 
<b:skin><![CDATA[/* 
----------------------------------------------- 
Blogger Template Style 
Name:  TheStyle  
Author :  http://www.soratemplates.com 
Designer: http://www.elegantthemes.com 
Date:  Sep 2012 
License: This free Blogger template is licensed under the Creative Commons Attribution 3.0 License, which permits both personal and commercial use. However, to satisfy the 'attribution' clause of the license, you are required to keep the footer links intact which provides due credit to its authors. For more specific details about the license, you may visit the URL below: 
http://creativecommons.org/licenses/by/3.0 
----------------------------------------------- */ 
body#layout #tabbed-area,body#layout #search-form,#navbar,#credit,.date-header,.feed-links,.post-location,.post-share-buttons,.post-icons{display: none !important;} 
body,h1,h2,h3,h4,h5,ul,li,a,p,span,img,dd{margin:0;padding:0;list-style:none;text-decoration:none;border:none;outline:none;vertical-align:baseline;} 
body#layout #PageList1{float:none} 
body#layout #main-wrapper { float: left; width: 70%; } 
body#layout #header-wrapper { margin-bottom:0 } 
body { 
    background-color: #2C2C2C; 
    color: #7A7575; 
    font-family: 'Droid Sans',Arial,Verdana,sans-serif; 
    font-size: 13px; 
    line-height: 19px; 
} 

h1, h2, h3, h4, h5, h6 { 
    font-weight: normal; 
    letter-spacing: -1px; 
    line-height: 1em; 
    padding-bottom: 5px; 
} 

a {color: #00B7F3;} 
a:hover {} 

#container { 
    background: url(https://lh4.googleusercontent.com/-RMDcXHbrWZg/UEsR-ChcvgI/AAAAAAAADjo/VAfyrAnPmWU/s474/container-bg.png) repeat-y scroll 0 0 #323232; 
    position: relative; 
} 

#container2 { 
    background: url(https://lh3.googleusercontent.com/-9DPCUMBJJCA/UEsR-Di3HOI/AAAAAAAADjk/DJ6QpA0gozk/s372/container-bg-right.png) repeat-y scroll right top transparent; 
    min-height: 300px; 
    padding: 0 0 0 3%; 
} 

#header-wrapper {margin-bottom: 50px;} 
#header{} 
#header-inner {padding:50px 0 0} 
#header,#header a { color: #fff } 
#header a:hover {} 
#header h1 {font-size:120px;text-transform:uppercase;padding:0} 
#header img {max-height:105px} 
#header .description {margin-bottom: 10px;padding-left: 10px;} 

#PageList1{float: left;} 
ul.nav { padding-top: 20px; } 
.nav li {float: left;} 
ul.nav a { font-size: 24px; color: #ffffff; text-decoration: none; padding-bottom: 58px; text-transform: uppercase; padding: 8px 8px 12px;} 
ul.nav a:hover, ul.nav > li.current-menu-item > a,.PageList li.selected a { color: #dcc08e; text-shadow: 1px 1px 0px #000; } 

#search-form {float: right; background: url(https://lh6.googleusercontent.com/-XddNEOGCeQk/UEsSBq5Y6GI/AAAAAAAADlU/ykXt8G9jU4M/s191/search-bg.png) no-repeat; width: 191px; height: 33px; margin: 12px 3% 0px 0px;} 
input#searchinput { background:none; border: none; font-size: 12px; font-style: italic; color: #595959; text-shadow: 1px 1px 1px #000; margin-top:0px; padding-left:13px; width:146px; float: left; position: relative; top: 5px; } 
input#searchsubmit { float:left; margin-top:10px; } 

#content { padding-bottom: 25px; position: relative; } 
#content .fullwidth {width: 100% !important;} 
.entry { position: relative; margin: 0px 0px 24px; background-color: #fff; border: 1px solid #fff; box-shadow: 3px 6px 7px 1px rgba(0, 0, 0, 0.6); -moz-box-shadow:3px 3px 3px rgba(0, 0, 0, 0.6); -webkit-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.6); } 

p.postinfo { 
    color: #2C2C2C; 
    font-size: 18px; 
    margin-top: -2px; 
    padding: 0 15px 10px; 
    text-transform: uppercase; 
} 
p { line-height:18px; } 
div.category {line-height: 20px;text-align:right;background-color: #9a1d0d; display:block; position: absolute; top: 0px; right: 2px; padding: 7px 8px 0 8px; max-height: 23px; overflow: hidden;} 
div.category a {font-size: 22px; color: #ffffff; text-decoration: none; text-transform: uppercase; } 
span.month {font-size: 48px; color: #ffffff; text-decoration: none; text-transform: uppercase; position: absolute; top: 40px; right: 0px; padding-right: 8px;} 
span.date {display:block; position: absolute; top: 40px; right: 0px; padding-right: 8px;} 

#content-bottom-bg { 
    background: url(https://lh3.googleusercontent.com/-xbMeEF1CMmQ/UEsSAIBn7CI/AAAAAAAADkg/uqKXOYFv49E/s4/footer-top.png) repeat-x scroll 0 0 transparent; 
    border-bottom: 1px solid #4A4A4A; 
    bottom: 0; 
    height: 4px; 
    left: 0; 
    position: absolute; 
    width: 100%; 
} 

h3.post-title a { color: #00b7f3<!--#9A1D0D-->; font-size: 30px; text-transform: uppercase;overflow: hidden;<!--ADDED BY CW-->} 
<!--BELOW ADDED BY CW--> 
.post-outer { 
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
} 
<!--ABOVE ADDED BY CW--> 

h1.post-title { 
    color: #9A1D0D; 
    font-size: 36px; 
    padding-bottom: 4px; 
    text-transform: uppercase; 
    overflow: hidden;<!--ADDED BY CW--> 
    text-overflow: ellipsis;<!--ADDED BY CW--> 
    white-space: nowrap;<!--ADDED BY CW--> 

} 
.entry h3 { padding: 0 15px; font-size: 24px;} 
.thumbnail img{display:block;width:222px;height:180px;margin: 2px 0 14px 2px} 
.entry.big .thumbnail img{width:466px;} 
.thumbnail .overlay {background: url(https://lh6.googleusercontent.com/-BW3EslWyQC0/UEsSArpUaaI/AAAAAAAADk4/2pQ8ayc3p4I/s222/overlay.png) no-repeat; display:block; position: absolute; height: 180px; width: 224px; top: 0px; left: 2px;} 
.entry.big .overlay {background: url(https://lh4.googleusercontent.com/-gA72kHflMgs/UEsSAv-CUOI/AAAAAAAADk8/h_PKHudGlOw/s466/overlay2.png) no-repeat; display:block; position: absolute; height: 180px; width: 480px; top: 0px; left: 2px;} 
.entry-content { 
    background: url(https://lh3.googleusercontent.com/-OUfcj2Qk9I4/UEsR-1Fsn-I/AAAAAAAADjw/4EEWnDRU4y0/s9/entry-bottom-bg.png) repeat-x scroll left bottom transparent; 
    padding-bottom: 10px; 
} 
.bottom-bg { 
    background: url(https://lh4.googleusercontent.com/-cAmQAE8B1IU/UEsR-_uxihI/AAAAAAAADkE/BhmnlPyrEOU/s6/entry-top-bg.png) repeat-x scroll left top transparent; 
    overflow: hidden; 
} 

.bottom-bg .excerpt { height: 75px; padding: 10px 17px 0; } 
.textright { text-align: right; } 
.entry a.readmore { font-size: 28px; color: #a5a5a5; margin-top: -5px; display: block;} 

p.post-meta, p.post-meta a { 
    color: #2C2C2C; 
    font-size: 18px; 
    text-transform: uppercase; 
    padding-bottom: 10px; 
} 

.hr { 
    background: url(https://lh3.googleusercontent.com/-iGut9H4FeFU/UEsSARlKOUI/AAAAAAAADko/JKwCEvDZaSk/hr-bg.png) repeat-x scroll 0 0 transparent; 
    height: 1px; 
    margin-bottom: 6px; 
} 

.post blockquote { font: italic 13px georgia; margin: 1em 20px;} 

#sidebar-wrapper { 
    float: right; 
    font-size: 14px; 
    margin: 0 3% 0 0; 
    text-shadow: 1px 1px 0 #FFFFFF; 
    width: 26%; 
} 

.sidebar {margin-top:15px} 
.sidebar .widget,#tabbed .widget {background: #e7e7e7 url(https://lh3.googleusercontent.com/-OUfcj2Qk9I4/UEsR-1Fsn-I/AAAAAAAADjw/4EEWnDRU4y0/s9/entry-bottom-bg.png) repeat-x bottom left; padding-bottom: 10px; border: 1px solid #e7e7e7; margin-bottom: 15px; box-shadow: 3px 6px 7px 1px rgba(0, 0, 0, 0.6); -moz-box-shadow:3px 3px 3px rgba(0, 0, 0, 0.6); -webkit-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.6); } 
.sidebar h2 {color:#9a1d0d; font-size:30px; text-decoration:none; text-transform:uppercase; background: url(https://lh4.googleusercontent.com/-cAmQAE8B1IU/UEsR-_uxihI/AAAAAAAADkE/BhmnlPyrEOU/s6/entry-top-bg.png) repeat-x bottom left; padding: 21px 5px 9px 22px;} 
.sidebar .widget-content {padding: 10px 5px 7px 22px;color:#7a7575;}    
.sidebar .widget-content ul { margin: 0px 0px 0px 15px; } 
.sidebar .widget-content ul li { background: url(https://lh3.googleusercontent.com/-ca73xQGUkQ0/UEsSCt9xG0I/AAAAAAAADmA/IBvLBqoqbIo/s6/widget-bullet.png) no-repeat 0px 12px; padding:5px 0px 5px 13px; } 
.sidebar .widget-content ul li ul { padding:3px 0px 0px 7px; margin: 0px 0px -7px; }    
.sidebar .widget-content a { color: #7a7575; text-decoration: none;} 
.sidebar .widget-content a:hover { color: #595656; } 

#tabbed-area { background: #d6d6d6 url(https://lh4.googleusercontent.com/-cAmQAE8B1IU/UEsR-_uxihI/AAAAAAAADkE/BhmnlPyrEOU/s6/entry-top-bg.png) repeat-x bottom left; padding-bottom: 1px; } 
#tabbed-area li { background:#d6d6d6; float: left; width: 33%; } 
#tabbed-area li a { font-size: 30px; color: #9a1d0d; text-shadow: 1px 1px 0px #ffffff; display: block; padding: 19px 8% 7px; background: url(https://lh5.googleusercontent.com/-7v6_A-bd7Hk/UEsSCP2B4bI/AAAAAAAADlk/NntOh4bXlOw/tabbed-right-bg.png) repeat-y top right; text-transform: uppercase; } 
#tabbed-area li.last a { background: none; } 
#all_tabs a{color: #2b2b2b;} 
#tabbed-area li a:hover,#all_tabs a:hover { text-decoration: none; color: #000000; } 
#tabbed-area li.ui-state-active a { background-color: #e7e7e7; } 
#tabbed .tab ul li { padding: 14px 7% 10px; background:#E7E7E7 url(https://lh4.googleusercontent.com/-cAmQAE8B1IU/UEsR-_uxihI/AAAAAAAADkE/BhmnlPyrEOU/s6/entry-top-bg.png) repeat-x bottom left; }  
#tabbed img.smallthumb { float: left; border: 3px solid #d6d6d6; margin: 0 8px 5px 0px; } 
#all_tabs span { color: #a1a1a1; display: block; font: italic 11px Georgia, serif; color: #a1a1a1; padding-top:4px; } 
.ui-tabs-hide { display: none; } 

#comments{overflow:hidden;margin-left:100px} 
#comments h4{display:inline;padding:10px;line-height:40px} 
#comments h4,.comments .comment-header,.comments .comment-thread.inline-thread .comment{position:relative} 
#comments h4,.comments .user a,.comments .continue a{font-size:16px} 
#comments h4,.comments .continue a{font-weight:normal;color:#fff} 
#comments h4:after{content:"";position:absolute;bottom:-10px;left:10px;border-right:20px solid transparent;width:0;height:0;line-height:0} 
#comments .avatar-image-container img{border:0} 
.comment-thread{color:#111} 
.comment-thread a{color:#777} 
.comment-thread ol{margin:0 0 20px} 
.comment-thread .comment-content a,.comments .user a,.comments .comment-thread.inline-thread .user a{color:#9A1D0D} 
.comments .avatar-image-container,.comments .avatar-image-container img{width:48px;max-width:48px;height:48px;max-height:48px} 
.comments .comment-block,.comments .comments-content .comment-replies,.comments .comment-replybox-single{margin-left:60px} 
.comments .comment-block,.comments .comment-thread.inline-thread .comment{border:1px solid #ddd;background:#f9f9f9;padding:10px} 
.comments .comments-content .comment{margin:15px 0 0;padding:0;width:100%;line-height:1em} 
.comments .comments-content .icon.blog-author{position:absolute;top:-12px;right:-12px;margin:0;background-image: url(https://lh5.googleusercontent.com/-cz1ogKtwNBc/T-xs3x0de-I/AAAAAAAABwI/KlCgXlV7uo0/s36/author);width:36px;height:36px} 
.comments .comments-content .inline-thread{padding:0 0 0 20px} 
.comments .comments-content .comment-replies{margin-top:0} 
.comments .comment-content{padding:5px 0;line-height:1.4em} 
.comments .comment-thread.inline-thread{border-left:1px solid #ddd;background:transparent} 
.comments .comment-thread.inline-thread .comment{width:auto} 
.comments .comment-thread.inline-thread .comment:after{content:"";position:absolute;top:10px;left:-20px;border-top:1px solid #ddd;width:10px;height:0px} 
.comments .comment-thread.inline-thread .comment .comment-block{border:0;background:transparent;padding:0} 
.comments .comment-thread.inline-thread .comment-block{margin-left:48px} 
.comments .comment-thread.inline-thread .user a{font-size:13px} 
.comments .comment-thread.inline-thread .avatar-image-container,.comments .comment-thread.inline-thread .avatar-image-container img{width:36px;max-width:36px;height:36px;max-height:36px} 
.comments .continue{border-top:0;width:100%} 
.comments .continue a{padding:10px 0;text-align:center} 
.comment .continue{display:none} 
#comment-editor{width:103%!important} 
.comment-form{width:100%;max-width:100%} 

#blog-pager-newer-link {float: left;} 
#blog-pager-older-link {float: right;} 
#blog-pager { height: 73px; margin:0; padding:10px 0; clear:both; } 
.pagenavi {position: relative;text-align: center;} 
.pagenavi a { padding: 5px 7px !important; margin: 2px; text-decoration: none; border: none !important; color: #ffffff !important; background: none !important; font-weight: normal !important; font-size: 36px !important; text-shadow: 1px 1px 1px rgba(0,0,0,0.4); } 
.pagenavi span.current,.pagenavi span.extend,.pagenavi a:active,.pagenavi a:hover { padding: 5px 7px !important; margin: 2px; font-weight: normal !important; background: none !important; border: none !important; color:#dcc08e !important; font-size: 36px !important; text-shadow: 1px 1px 1px rgba(0,0,0,0.4); } 
.pagenavi .pages {display:none} 
.pagenavi span#right-arrow { 
    background: url(https://lh5.googleusercontent.com/-66Q_--yBc_M/UEsSBRccq0I/AAAAAAAADlM/zrJcbXcNkgk/s29/right-arrow.png) no-repeat scroll 0 0 transparent; 
    display: block; 
    height: 29px; 
    position: absolute; 
    right: 3%; 
    top: 1px; 
    width: 27px; 
} 
.pagenavi span#left-arrow { 
    background: url(https://lh6.googleusercontent.com/-QeyupBWH9sU/UEsSAWpVU7I/AAAAAAAADkw/cwaKy9vzDTA/s29/left-arrow.png) no-repeat scroll 0 0 transparent; 
    display: block; 
    height: 29px; 
    left: 12px; 
    position: absolute; 
    top: 1px; 
    width: 27px; 
} 

#footer { background: #2c2c2c url(https://lh4.googleusercontent.com/-9KpLVnuP-U8/UEsR_XHrdOI/AAAAAAAADkM/HCY21tY1qRw/s388/footer-leftbg.png) repeat-y; } 
#footer-wrapper { background: url(https://lh3.googleusercontent.com/-jlWcqoo28UI/UEsR_kVd7pI/AAAAAAAADkU/E4TmyTCf7GI/s402/footer-rightbg.png) repeat-y top right; padding: 20px 7% 0px; } 
#footer .column { width: 285px; margin: 0px 0px 45px; float: left; color: #d1d1d1; text-shadow: 1px 1px 1px #000; } 
#footer .column h2 {color:#dcc08e; font-size: 30px; text-transform: uppercase; margin: 30px 0px 5px 0px; } 
#footer .column ul li { margin-bottom: 11px; } 
#footer .column ul a { color:#d1d1d1; text-decoration: none; background: url(https://lh5.googleusercontent.com/-z1-aXJmQ_6Q/UEsR_ZX8E8I/AAAAAAAADkc/Mdf9R5fj1qg/s42/footer-bullet.png) no-repeat 0 2px; padding-left:20px; } 
#footer .column ul a:hover { background: url(https://lh5.googleusercontent.com/-z1-aXJmQ_6Q/UEsR_ZX8E8I/AAAAAAAADkc/Mdf9R5fj1qg/s42/footer-bullet.png) no-repeat bottom left; color:#fff; } 
p#copyright { text-align: right; padding-bottom: 40px; color:#686868; text-shadow: 1px 1px 1px #000; font-size: 12px; } 
p#copyright a { font-weight: bold; color:#8c8c8c; } 

#random-tabbed img,#recent-tabbed img,#PopularPosts1 img { 
    border: 3px solid #D6D6D6; 
    float: left; 
    width:38px; 
    height:38px; 
    margin: 0 8px 5px 0; 
    padding:0 
} 
#PopularPosts1 li {} 
.status-msg-body {position:relative !important} 
.CSS_LIGHTBOX { z-index: 9999 !important; } 
<!--BELOW ADDED BY CW--> 
/* Drop Down Menu By helperblogger.com */ 
#nav { 
float: left; 
font: bold 12px Arial, Helvetica, Sans-serif; 
border: 1px solid #121314; 
border-top: 1px solid #2b2e30; 
overflow: hidden; 
width: 100%; 
background: #3C4042; 
background: -webkit-gradient(linear, left bottom, left top, color-stop(0.09, rgb(59,63,65)), color-stop(0.55, rgb(72,76,77)), color-stop(0.78, rgb(75,77,77))); 
background: -moz-linear-gradient(center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78%); 
background: -o-linear-gradient(center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78%); 
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 0 5px rgba(0, 0, 0, 0.1) inset; 
} 

#nav ul { 
margin: 0; 
padding: 0; 
list-style: none; 
} 

#nav ul li { 
float: left; 
} 

#nav ul li a { 
float: left; 
color: #d4d4d4; 
padding: 10px 20px; 
text-decoration: none; 
background: #3C4042; 
background: -webkit-gradient(linear, left bottom, left top, color-stop(0.09, rgb(59,63,65)), color-stop(0.55, rgb(72,76,77)), color-stop(0.78, rgb(75,77,77))); 
background: -moz-linear-gradient(center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78%); 
background: -o-linear-gradient(center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78%); 
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 0 5px rgba(0, 0, 0, 0.1) inset; 
border-left: 1px solid rgba(255, 255, 255, 0.05); 
border-right: 1px solid rgba(0,0,0,0.2); 
text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.6); 
} 
/* Drop Down Menu By helperblogger.com */ 
#nav ul li a:hover, 
#nav ul li:hover > a { 
color: #252525; 
background: #3C4042; 
background: -webkit-gradient(linear, left bottom, left top, color-stop(0.09, rgb(77,79,79)), color-stop(0.55, rgb(67,70,71)), color-stop(0.78, rgb(69,70,71))); 
background: -moz-linear-gradient(center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78%); 
background: -o-linear-gradient(center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78%); 
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2), 0 -1px #000; 
} 

#nav li ul a:hover, 
#nav ul li li:hover > a { 
color: #2c2c2c; 
background: #5C9ACD; 
background: -webkit-gradient(linear, left bottom, left top, color-stop(0.17, rgb(61,111,177)), color-stop(0.51, rgb(80,136,199)), color-stop(1, rgb(92,154,205))); 
background: -moz-linear-gradient(center bottom, rgb(61,111,177) 17%, rgb(80,136,199) 51%, rgb(92,154,205) 100%); 
background: -o-linear-gradient(center bottom, rgb(61,111,177) 17%, rgb(80,136,199) 51%, rgb(92,154,205) 100%); 
border-bottom: 1px solid rgba(0,0,0,0.6); 
border-top: 1px solid #7BAED9; 
text-shadow: 0 1px rgba(255, 255, 255, 0.3); 
} 
/* Drop Down Menu By helperblogger.com */ 
#nav li ul { 
background: #3C4042; 
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.09, rgb(77,79,79)), color-stop(0.55, rgb(67,70,71)), color-stop(0.78, rgb(69,70,71))); 
background-image: -moz-linear-gradient(center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78%); 
background-image: -o-linear-gradient(center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78%); 
left: -999em; 
margin: 35px 0 0; 
position: absolute; 
width: 160px; 
z-index: 9999; 
box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset; 
-moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset; 
-webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset; 
border: 1px solid rgba(0, 0, 0, 0.5); 
} 

#nav li:hover ul { 
left: auto; 
} 

#nav li ul a { 
background: none; 
border: 0 none; 
margin-right: 0; 
width: 120px; 
box-shadow: none; 
-moz-box-shadow: none; 
-webkit-box-shadow: none; 
border-bottom: 1px solid transparent; 
border-top: 1px solid transparent; 
} 

.nav ul li ul { 
    position: absolute; 
    left: 0; 
    display: none; 
    visibility: hidden; 
} 

.nav ul li ul li { 
    display: list-item; 
    float: none; 
} 

.nav ul li ul li ul { 
    top: 0; 
} 

.nav ul li ul li a { 
    font: normal 13px Verdana; 
    width: 160px; 
    padding: 5px; 
    margin: 0; 
    border-top-width: 0; 
    border-bottom: 1px solid gray; 
} 

#nav li li ul { 
margin: -1px 0 0 160px; 
visibility: hidden; 
} 

#nav li li:hover ul { 
visibility: visible; 
} 
/* Drop Down Menu By helperblogger.com */ 

<!--ABOVE ADDED BY CW--> 

]]></b:skin> 
<style type='text/css'> 
<b:if cond='data:blog.pageType == &quot;index&quot;'> 
#sidebar-wrapper {display:none} 
.entry-inner{position:relative} 
.small { width:226px; } 
.big { width:470px; } 
<b:else/> 
#main-wrapper{margin-left:-3%;float: left;width: 71%;} 
.entry { background: #ffffff url(https://lh3.googleusercontent.com/-OUfcj2Qk9I4/UEsR-1Fsn-I/AAAAAAAADjw/4EEWnDRU4y0/s9/entry-bottom-bg.png) repeat-x; border: 1px solid #ffffff; padding: 30px 0px 0px; box-shadow: 3px 6px 7px 1px rgba(0, 0, 0, 0.6); -moz-box-shadow:3px 3px 3px rgba(0, 0, 0, 0.6); -webkit-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.6); margin-bottom: 15px; } 
.entry-inner { background: url(https://lh3.googleusercontent.com/-OUfcj2Qk9I4/UEsR-1Fsn-I/AAAAAAAADjw/4EEWnDRU4y0/s9/entry-bottom-bg.png) repeat-x bottom left; padding: 0px 4% 30px; } 
.info-panel { float: left; margin-right: 3%; width: 29%; } 
.post-text img { max-width:420px; } 
.info-panel h3.infotitle { 
    color: #2C2C2C; 
    font-size: 24px; 
    padding:0 0 9px; 
    text-shadow: none; 
    text-transform: uppercase; 
} 
.info-panel .tags ul li { float: left; } 
.info-panel .tags ul li a { display: block; padding: 10px 10px 8px; margin: 0px 3px 3px 0px; background: #efefef; font-size: 11px; color: #6e6e6e; text-transform: uppercase; text-shadow: 1px 1px 0px #ffffff; } 
.info-panel .tags ul li a:hover { color: #000000; text-decoration: none; } 
.related ul li { background: url(https://lh4.googleusercontent.com/-4A2wStB_txo/UEsSAwwBQWI/AAAAAAAADlE/k9ROBQlzCWE/s5/post-bullet.png) no-repeat scroll 0 7px transparent; padding: 0 0 5px 11px; } 
.related ul li a { color: #7A7575; } 
.related ul li a:hover { color: #000000; } 
.share-panel,.related{margin-top:30px} 
.share-panel img {margin: 0 7px 5px 0;} 
</b:if> 
<b:if cond='data:blog.pageType == &quot;item&quot;'> 
.post-text { float: right; width: 68%; } 
</b:if> 
</style> 
<script type='text/javascript'>//<![CDATA[ 
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('8 9(s,n){g s.h(/<.*?>/i,\'\').j(/\\s+/).k(0,n-1).l(\' \')}8 b(a){m p=o.q(a),5=\'\',4=p.r(\'4\');t(4.u>=1){5=\'<4 6="\'+4[0].6+\'" />\'}v{5=\'<4 6="w://A.B.C/-D/E-F/G/H-I/J.K" />\'}p.c=\'<2 3="L"><a 7="\'+y+\'">\'+5+\'<d 3="M"></d></a></2>\'+\'<e 3="N-O"><a 7="\'+y+\'">\'+x+\'</a></e>\'+\'<p 3="P">Q R \'+z+\'</p>\'+\'<2 3="S-T"><2 3="U-V"><2 3="W"><p>\'+9(p.c,X)+\'...</p>\'+\'<2 3="Y"><a 3="b" 7="\'+y+\'">&#f;&#f;</a></2>\'+\'</2></2></2>\'}',61,61,'||div|class|img|imgtag|src|href|function|stripTags||readmore|innerHTML|span|h3|187|return|replace|ig|split|slice|join|var||document||getElementById|getElementsByTagName||if|length|else|https||||lh4|googleusercontent|com|G9M2DTCTUwM|Tlh|2pwtc5I|AAAAAAAABKM|kCJg|Kf3W2M|no_image_yet|jpg|thumbnail|overlay|post|title|postinfo|Posted|by|entry|content|bottom|bg|excerpt|40|textright'.split('|'),0,{})) 
//]]></script> 
</head> 

如果有人可以幫助我將不勝感激這麼多。

+0

我無法重現該問題:在IE8,它很好地工作,在IE7中,下拉根本不展開。 [看到這個小提琴](http://jsfiddle.net/dUzFS/) – Kraz

+0

謝謝克拉茲!我對這個jsfiddle很新。有沒有辦法用小提琴來測試ie8等?因爲我在你的小提琴中看到的是完美的。就像它在Firefox和Chrome中的頁面上看起來一樣。但是當我在IE中查看頁面時,子菜單項會右移。 –

+0

打開IE開發工具(快捷鍵:F12)。你可以選擇模擬IE8/IE7/Quicks模式(比如IE6)。無處不在。 – Kraz

回答

0

好了,直花在這5天,沒有得到它的工作,並研究小時後,我終於找到了一個偉大的教程,說明如何創建CSS下拉菜單,它可以正確處理所有的瀏覽器,包括IE 7,8和9.所以我使用了該代碼並對其進行了修改以適應我的偏好。

謝謝@Kraz的幫助。

在情況下,這可能是幫助他人(大概只有初學者和我一樣),這裏是鏈接。有一個小修正加入了z-index,所以如果你的菜單下拉菜單被其他元素所覆蓋,請確保你閱讀了所有的評論。我永遠不希望任何人通過我所經歷的事情。 http://designmodo.com/css3-dropdown-menu/