博客的CSS下拉菜单转移子菜单项仅在IE权(Blogger css drop down menu s

2019-11-01 06:43发布

站内文章 / 移动开发
41 0 0

我想添加一个CSS菜单下拉到我的博客博客。

我使用一些代码，我发现了一个下拉菜单。 它完美的作品在Firefox和Chrome，但不是在IE中。 我使用IE9，但有一个meta标签仿效IE7。 在IE中，子菜单项被移动到正确的正下方的主菜单项出现的替代。 （使用我的代码为例，“2010点访谈”，“2011点访谈”等不直接在“广播访谈”当我徘徊。他们右移。

我一直在试图解决这个4天。 我不是伟大的编码所以即使我已经做了很多researh的一个解决方案，我不明白，不能得到它的权利。 我希望有人能帮助我，否则我只是要放弃。

我想离开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>

如果有人可以帮助我将不胜感激这么多。

Answer 1:

好了，直接花5天之后，没有得到它的工作，并研究小时，我终于找到了一个伟大的教程，说明如何创建CSS下拉菜单，它可以正确处理所有的浏览器，包括IE 7,8和9所以我使用的代码，并修改它适合我的喜好。

感谢您@Kraz的帮助。

在这种情况下，可能会帮助他人（大概只有初学者和我一样），这里是链接。 有一个小的修复程序包括z索引，以便确保您通过所有的评论看，如果你的菜单下拉菜单被其他元素覆盖。 我也绝对不会让任何人去通过什么我穿了过去。 http://designmodo.com/css3-dropdown-menu/



Answer 2:

酷教程中，我发现有良好的菜单栏和其他CSS设计你可能会喜欢的设计网站。

http://freebietemplate.com/css-designs/css-designs.html

祝你今天愉快



文章来源: Blogger css drop down menu shifts sub menu items to the right only in IE
标签： css internet-explorer drop-down-menu blogger
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~