在所有浏览器中对齐CSS中的下拉菜单

Question

我有一个从WordPress生成的下拉菜单，所以我不想更改它的HTML。我可以根据需要更改CSS，除了我的下拉菜单中的对齐问题外，我几乎没有工作，因为我需要它。

谷歌浏览器

的FireFox

Internet Explorer

从上面的图片中你可以看到IE和FIreFox显示相同，但​​Chrome总是与2.不同。我的目标是让这个框与菜单按钮的右侧完美对齐然后让它看起来在所有这三种浏览器中都是如此。

我已经将HTML和CSS解压缩到一个JSFiddle页面中进行测试并在这里玩...

代码视图： http://jsfiddle.net/jasondavis/hAb4k/

查看菜单的完整视图： http://jsfiddle.net/jasondavis/hAb4k/embedded/result/

我的HTML

<nav id="head-nav-menu" class="nav-main" role="navigation" itemscope="itemscope" itemtype="http://schema.org/SiteNavigationElement">
    <ul id="nav" class="nav nav-pills">
        <li class="active menu-home">
            <a href="/">Home</a>
        </li>
        <li class="menu-about">
            <a href="/about/">About</a>
        </li>
        <li class="menu-projects">
            <a href="/projects/">Projects</a>
        </li>
        <li class="menu-blog">
            <a href="/blog/">Blog</a>
        </li>
        <li class="dropdown menu-services">
            <a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="/services/">Services <b class="caret"></b></a>
            <ul class="dropdown-menu">
                <li class="menu-consulting"><a href="/services/consulting/">Consulting</a></li>
                <li class="menu-magento-development">  
                    <a href="/services/magento-development/">Magento Development</a>
                </li>
                <li class="menu-wordpress-development">
                    <a href="/services/wordpress-development/">WordPress Development</a>
                </li>
                <li class="menu-sugarcrm-development">
                    <a href="/services/sugarcrm-development/">SugarCRM Development</a>
                </li>
                <li class="menu-web-development">
                    <a href="/services/web-development/">Web Development</a>
                </li>
                <li class="menu-seo">
                    <a href="/services/seo/">SEO</a>
                </li>
            </ul>
        </li>
        <li class="menu-contact">
            <a href="/contact/">Contact</a>
        </li>
    </ul>
</nav>

CSS

body{
    background: #40C8F4 !important;
}
nav ul, nav ol {
list-style: none;
list-style-image: none;
}

#head-nav-menu{
  float: right;
  margin-top: 29px;
}
#head-nav-menu li {
  float: left;
  position: relative;
  padding: 0 2px 0 2px;
}
.nav a {
  font-family: 'arial';
  font-size: 18px;
  padding: 8px 18px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  white-space: nowrap;
  color: #fff;
  opacity: 0.9;
  letter-spacing: 1px;
    text-decoration: none;
}
.menu-contact a {
  border: 2px solid #FFF;
  padding: 8px 18px;
  transition: 0.05s linear;
  -moz-transition: 0.05s linear;
  -webkit-transition: 0.05s linear;
}
.nav .menu-contact a:hover {
  background-color: #FFF;
  color: #797979;
}
#nav ul a {
  font-weight: 100;
}
.nav a:hover,
.nav > .active a {
  opacity: 1;
  background-color: #3DBCE6;
}
.nav > .active li a {
  background-color: inherit;
}
.tinynav {
  display: none;
  width: 100%;
  margin-top: .5em;
  margin-bottom: .6em;
}
.nav li.button a {
  background-color: rgba(255, 255, 255, 0.1);
  border: 2px solid #FFF;
  border-radius: 4px;
  margin-top: 5px;
  padding: 8px 18px;
  font-family: 'ProximaNova-bold', Helvetica, Arial, sans-serif;
  font-weight: normal;
  margin-left: 16px;
  color: #FFF !important;
}
.nav li.button a:hover {
  background-color: #FFF;
  opacity: 1;
  color: #444 !important;
}
/* ==========================================================================
   Main Container General Layout Styles
   ========================================================================== */
.header-container header {
  padding-top: 13px;
  padding-bottom: 18px;
}
/* Navigation > Dropdown Menus */
#nav .dropdown-menu,
#nav .children {
  display: none;
  padding: 0;
  position: absolute;
  z-index: 99999;
  border: 1px solid #86DEFC;
  width: 333%;
  /*right: 8px;*/
  left: -239%;
  top: 23px;
  background-color: #F2F9FC;
}
#nav .dropdown-menu li {
  width: 195px;
  float: left;
  display: inline-block;
  /*width: 50%;*/
}
.nav .dropdown-menu a {
  color: #030303;
}
#nav li:hover > ul,
#nav ul li:hover > ul,
.dropdown:hover > ul {
  display: inline-block;
  -webkit-animation: fadeDown 250ms ease;
  -moz-animation: fadeDown 250ms ease;
  -ms-animation: fadeDown 250ms ease;
  -o-animation: fadeDown 250ms ease;
  animation: fadeDown 250ms ease;
  background-color: #fff;
  color: #000;
  border: 1px solid #E9E9E9;
  border-top: none;
}
#nav .dropdown-menu ul,
#nav .children ul {
  left: 99.75%;
  top: -1px;
}
#nav ul li,
#nav ul ul li {
  margin-left: 0;
}
#nav ul li:first-child,
#nav ul ul li:first-child {
  border-top: none;
}
#nav ul a,
#nav ul ul a {
  font-size: 14px;
  line-height: 21px;
  text-align: left;
  padding: 10px;
  display: inline-block;
  min-width: 125px;
  border-bottom: none;
  margin-bottom: 0 !important;
  width: 100%;
  letter-spacing: 1px;
  font-family: arial;
}
#nav ul a:hover,
#nav ul ul a:hover {
  color: #098EB9 !important;
  background: none;
}
#nav ul ul.dropdown-menu a:hover {
  width: 100%;
  color: #63E924 !important;
  border-bottom: none;
}
#nav li.current_page_item ul a,
#nav li.current-menu-parent ul a,
#nav li.current_page_parent ul a {
  color: #000;
  font-weight: 700;
}
#nav ul li.current-menu-item a {
  color: #e9242e !important;
}
#head-nav-menu .nav li:hover a.dropdown-toggle {
  background: #fff;
  color: #000;
  opacity: 1;
  border-right: 1px solid #E7E7E7;
}
.nav .dropdown a:hover {
  opacity: 1;
  background-color: #fff;
}
#nav .dropdown-menu li:hover {
  background: #F8F8F8;
}

Answer 1

将display: block提交给.nav a

然后移除left: 239%的{​​{1}}并向其提供#nav .dropdown-menu和right: 2px。

以下是它的编辑演示。

http://jsfiddle.net/hAb4k/3/