Blogger css下拉菜单只将子菜单项向右移到IE [英] Blogger css drop down menu shifts sub menu items to the right only in IE
本文介绍了Blogger css下拉菜单只将子菜单项向右移到IE的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想在我的博客博客中添加一个css下拉菜单。
我使用一些下拉菜单中找到的代码。它在Firefox和Chrome中工作完美，但在IE中不行。我使用IE9，但有一个元标记来模拟IE7。在IE中，子菜单项向右移位，而不是直接出现在主菜单项下面。 （以我的代码为例，2010年访谈，2011年访谈等不是直接在电台采访下，当我徘徊时，他们向右移动。
我一直在努力解决这个问题4天。我不是伟大的编码所以即使我已经做了大量的研究的解决方案，我不明白，不能得到它正确我希望有人可以帮助我，否则我只会放弃。
我想保留doctype和元标记。
这是html（我已经添加到html / javascript小工具）。
< div id =nav>
< ul>
< li>< a href =http://brunomarstester.blogspot.com/>首页< / a& < / li>
< li>< a href =＃>颁奖典礼< / a>
< ul>
< li>< a href = ＃> AMAs< / a>< / li>
< li>< a href =＃> BET奖< / a>< / li>
< li>< a href =＃> Grammys< / a>< / li>
< li>< a href =＃> MTV VMAs< / a>< / li>
< li>< a href =＃>其他奖项< / a>< / li>
< / ul>
< / li>
< li>< a href =＃> Hooligan乐队< / 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 =＃>电台采访< / a>
< ul>
< li>< a href =＃> 2010年访谈< / a>< / li>
< li>< a href =＃> 2011年访谈< / a>< / li>
< li>< a href =＃> 2012年访谈< / a>< / li>
< li>< a href =＃> 2013年访谈< / a>< / li>
< / ul>
< / li>
< li>< a href =＃>电视/其他采访< / a>
< ul>
< li>< a href =＃> 2010年访谈< / a>< / li>
< li>< a href =＃> 2011年访谈< / a>< / li>
< li>< a href =＃> 2012年访谈< / a>< / li>
< li>< a href =＃> 2013年访谈< / a>< / li>
< / ul>
< / li>
< li>< a href =＃>表演< / a>
< ul>
< li>< a href =＃>奖项显示< / a>< / li>
< li>< a href =＃>音乐会< / a>< / li>
< li>< a href =＃>夜总会< / a>< / li&
< li>< a href =＃>广播电台< / a>< / li>
< li>< a href =＃>特殊活动< / a>< / li>
< li>< a href =＃>杂项< / a>< / li>
< / ul>
< / li>
< li>< a href =＃>电视< / a>
< ul>
< li>< a href =＃>访客星< / a>< / li&
< li>< a href =＃>杂项< / a>< / li>
< / ul>
< / li>
< li>< a href =＃>国际< / a>
< ul>
< li>< a href =＃>澳大利亚< / a>< / li>
< li>< a href =＃>巴西< / a>< / li>
< li>< a href =＃>加拿大< / a>< / li>
< li>< a href =＃>菲律宾< / a>< / li>
< li>< a href =＃>英国< / a>< / li>
< li>< a href =＃>其他< / a>< / li>
< / ul>
< / li>
< / ul>
< / div>
这里是顶部&模板代码头：
<？xml version =1.0encoding =UTF-8？ ;
<！DOCTYPE html PUBLIC - // W3C // DTD XHTML 1.0 Strict // ENhttp://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'/>
<！ - 上方通过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模板样式
名称：TheStyle
作者：http：//www.soratemplates.com
设计师：http://www.elegantthemes.com
日期：2012年9月
许可证：这个免费的Blogger模板是根据知识共享署名3.0许可协议授权，允许个人和商业用途。但是，为了满足许可证的署名条款，您需要保持页脚链接不变，为作者提供应有的信用。有关许可证的更多详细信息，您可以访问以下URL：
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;}
，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;宽度：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;颜色：＃595959; text-shadow：1px 1px 1px＃000; margin-top：0px; padding-left：13px; width：146px float：left;位置：相对; top：5px; }
input＃searchsubmit {float：left; margin-top：10px; }
#content {padding-bottom：25px;位置：相对; }
#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;显示：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;
}
<！ - 上方由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;显示：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 ;显示：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;颜色：＃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 / UER-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;宽度：33％; }
＃tabbed-area li a {font-size：30px;颜色：＃9a1d0d; text-shadow：1px 1px 0px #ffffff;显示：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;背景：＃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;显示：block; font：italic 11px格鲁吉亚，serif;颜色：＃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 {height：73px; margin：0; padding：10px 0;清除： }
.pagenavi {position：relative; text-align：center;}
.pagenavi a {padding：5px 7px！important; margin：2px; text-decoration：none; border：none！important; color：#ffffff！important;背景：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;背景：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/ UESBRccq0I / AAAAAAAAD1M / 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;颜色：＃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左下方; color：#fff; }
p＃copyright {text-align：right; padding-bottom：40px;颜色：＃686868; text-shadow：1px 1px 1px＃000; font-size：12px; }
p＃copyright a {font-weight：bold;颜色：＃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 ！重要; }
<！ - BELOW ADDED BY CW - >
/ *下拉菜单由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）） ，色停（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％）;
背景：-o-线性梯度（中心底部，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）） ，色停（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％）;
背景：-o-线性梯度（中心底部，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）;
}
/ *下拉菜单由helperblogger.com * /
#nav ul li a：hover，
#nav ul li：hover> a {
颜色：＃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）） ，色停（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（中心底，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％
背景：-o-线性梯度（中心底部，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）;
}
/ *下拉菜单由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 ）），色停（0.78，rgb（69,70,71）））;
background-image：-moz-linear-gradient（中心底，rgb（77,79,79）9％，rgb（67,70,71）55％，rgb（69,70,71）78％ ）;
background-image：-o-linear-gradient（中心底部，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;
}
/ *下拉菜单通过helperblogger.com * /
<！ - 上面添加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 / UER-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左下方; fillding：0px 4％30px; }
.info-panel {float：left;利润率：3％;宽度：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;颜色：＃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;宽度：68％; }
< / b：if>
< / style>
< script type ='text / javascript'> //<！[CDATA [
eval（function（p，a，c，k，e，r）{e = function ）{return（c 35 String.fromCharCode（c + 29）：c.toString （c）|| e（c）; k = [函数（e）]，其中， {return r [e]}; e = function（）{return'\\w +'}; c = 1}; while（c-）if（k [c]）p = p.replace RegExp（'\\b'+ e（c）+'\\b'，'g'），k [c]）; return p} /\'\').j(/\\s+/).k(0,n-1).l(\'\'）} 8 b（a）{mp = oq（a），5 = \'\'，4 = pr（\'4 \'）; t（4.u = 1） ; 4 6 =\'+ 4 [0] .6 + \'/> \'} v {5 = \'<4 6 =w：// ABC / -D / EF / G / HI / JK/> \'} pc = \'<2 3 =L>< a 7 =\'+ y + \' 5 + \'< d 3 =M>< / d>< / a>< / 2> \'+ \'< e 3 =NO 7 =\'+ y + \'> \'+ x + \'< / a>< / e> \'+ \'< p 3 =P& \'+ z + \'< / p> \'+ \'< 2 3 =ST>< 2 3 =UV>< 2 3 =W < p> \'+ 9（pc，X）+ \'...< / p> \'+ \'< 2 3 =Y>< a 3 =b 7 =\'+ y + \'>&＃f;&＃f;< / a>< / 2> \'+ \'< / 2& 2 | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | 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 |发表于|由| entry | content | bottom | bg | excerpt | 40 | textright'.split（'|'），0，{}））
/ /]]>< / script>
< / head>
如果任何人都能帮助我，我会非常感激。
谢谢@
如果这可能对其他人有用（可能只有像我这样的初学者），这里是链接。有一个小的修复，以包括z索引，因此，如果您的菜单下拉列表被其他元素覆盖，请确保阅读所有的意见。我永远不会希望任何人通过我经历了。 http://designmodo.com/css3-dropdown-menu/
I am trying to add a css drop down menu to my blog in blogger.
I am using some code that I found for a drop down menu. It works perfect in Firefox and Chrome but not in IE. I am using IE9 but have a meta tag to emulate IE7. In IE, the sub menu items are shifted over to the right instead of appearing directly below the main menu items. (Using my code as an example, the "2010 Interviews," "2011 Interviews," etc are not directly under "Radio Interviews" when I hover. They are shifted right.
I have been trying to fix this for 4 days. I'm not great with the coding so even though I have done lots of researh for a solution, I do not understand and can't get it right. I'm hoping someone can help me or else I'm just going to give up.
I'd like to leave the doctype and meta tag as is.
Here is the html (which I have added to an html/javascript gadget).
<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>
And here is the top portion & head of the code for the template:
<?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 == "index"'>
#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 == "item"'>
.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>
If anyone can help I would appreciate it so much.
解决方案
Well, after spending 5 days straight on this, not getting it to work, and hours of research, I finally found a great tutorial that explains how to create a css drop down menu and it works correctly for all browsers, including IE 7,8, and 9. So I used that code and modified it to suit my preferences.
Thank you @Kraz for your help.
In case this may be helpful to others (probably only beginners like me) here is the link. There was one small fix to include a z-index so make sure you read through all the comments if your menu drop downs are covered by other elements. I would never ever want anyone to go through what I went through. http://designmodo.com/css3-dropdown-menu/
这篇关于Blogger css下拉菜单只将子菜单项向右移到IE的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
