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

Question

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

谷歌浏览器

火狐

互联网浏览器

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

我已经将 HTML 和 CSS 提取到一个 JSFiddle 页面中，以便在这里进行测试和使用......

代码 View : http://jsfiddle.net/jasondavis/hAb4k/

查看菜单的完整 View : 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

然后删除 #nav .dropdown-menu 的 left: 239% 并给 right: 2px 和 top: 38px 给它。

这是它的编辑演示。

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