Question

我刚刚完成导航栏，保存了我的html并重新加载了我的页面。我开始盘旋在所有东西上，然后我看到“花名册”下拉列表中的文字位于容器的右侧，即使浮动到左侧。我试图使用margin-left，它要么不起作用，要么我可能会将'margin'插入错误的位置。这是一个Demo，这是我的代码：

HTML和JS

<!DOCTYPE HTML>
<html lang"en">

<head>
  <title>Home | Next Gen</title>
  <link rel="stylesheet" href="index.css" type="text/css" />
</head>

<body>
  <div id="header_logo-clearfix">
    <div id="header_logo">
      <a href="file:///C:/Users/Swag/Desktop/My%20Website/Home/home.html">
        <div id="logo">
          <img src="Header/banner.png" alt="Logo" align="middle" width="300"height="100">
        </div>
      </a>
    </div>
  </div>

  <div id="nav-clearfix">
    <nav id="nav">
      <ul class="nav-pages">
        <li class="current-menu-item"><a href="#">HOME</a></li>
        <li><a href="#">GALLERY</a></li>
        <li><a href="#">ABOUT US</a></li>
        <li><a href="#">SPONSORS</a></li>
        <li class="roster">
          <a href="#">ROSTER</a>
          <ul class="fallback">
            <li><a href="#">Management</a></li>
            <li><a href="#">Competitive</a></li>
            <li><a href="#">Editors</a></li>
            <li><a href="#">Feeding</a></li>
          </ul>
        </li>   
      </ul>
    </nav>
  </div>

  <script>

    $('nav li ul').hide().removeClass('fallback');
    $('nav li').hover(function () {
      $('ul', this).stop().slideDown(100);
    }, function () {
      $('ul', this).stop().slideUp(100);
    });

  </script>

  <div class="arrow_box"></div>

  <!--Footer-->
  <!--<div class="footer-wrap">
    <footer id="footer">
      <div id="footernav-clearfix">
        <div id="footernav">
          <ul class="footernav-pages">
            <li><a href="#">HOME</a></li>
            <li><a href="#">ROSTER</a></li>
            <li><a href="#">GALLERY</a></li>
            <li><a href="#">ABOUT US</a></li>
            <li><a href="#">SPONSORS</a></li>
          </ul>
        </div>
      </div>
      <p>&copy;2015 Next Generation All Rights Reserved | <a href="https://www.youtube.com/channel/UCvvpOw5l4HPs0Vu5Th9wuSA">Website by Flare</a></p>
    </footer>
  </div>-->
  <!--End of Footer-->

</body>
</html>

CSS

/*==========================
====== Imported Fonts ====== 
==========================*/

@import url(http://fonts.googleapis.com/css?family=Roboto:300);
@import url(http://fonts.googleapis.com/css?family=Bitter:400,700);
@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900,200italic,300italic,400italic,600italic,700italic,900italic);
@import url(http://fonts.googleapis.com/css?family=Oswald:400,300,700);
@import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);

/*=================
======= Body ======
=================*/

* { 
  margin: 0; padding: 0;
}

body {
  font-family: "Source Sans Pro";
  font-size: 14px;
  background-image: url(background.png)
}

/*=======================
====== Header Logo ======
=======================*/

#header_logo-clearfix {
  width: 100%;
  height: 100px;
  top: 30px;
  display: block;
  background-color: #02236a;
}

#logo {
  margin-left: auto;
  margin-right: auto;
  width: 20%;
}

.content {
  width: 100%;
  height: 100%;
}

/*===============
====== Nav ======
===============*/

#nav-clearfix {
  width: 100%;
  height: 30px;
  background: #02236a;
}

#nav {
  margin-left: 35%;
  max-width: 100%;
}

.nav-pages {
  padding-top: 10px;
}

.nav-pages li:not(:last-child) a:after {
  content: "";
  /* width: 0px; */
  background: white;
  margin-left: 8px;
  position: absolute;
  height: inherit;
  color: white;
  z-index: 5;
  border: 1px solid white;
  height: 15px;
}

.nav-pages li {
  float: left;
  margin-left: 20px;
}

.arrow_box {
  position: relative;
  background: #02236a;
  border: 1px solid #02236a;
}
.arrow_box:after, .arrow_box:before {
  top: 10%;
  left: 37.8%;
  border: solid;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.arrow_box:after {
  border-color: rgba(0, 0, 0, 0);
  border-top-color: #02236a;
  border-width: 15px;
  margin-left: -15px;
}
.arrow_box:before {
  border-color: rgba(0, 0, 0, 0);
  border-top-color: #02236a;
  border-width: 16px;
  margin-left: -16px;
}

/*=========================
======= CSS Slider ======== 
=========================*/

.cssSlider {
  margin-top: 50px;
  width: 100%;
  display: block;
  float: left;
  left: 50%;
}

/*==================
====== Footer ======
==================*/

#footer-wrap {
  width: 30%;
}
#footer {
  height: 40px;
  width: 100%;
  background-color: #000b22;
  position: relative;
  left: 0px;
  bottom: 0px;
}

#footer p {
  float: left;
  text-align: center;
  color: #fff;
  font-size: 15px;
  font-weight: bold;
  margin-left: 100px;
}

#footer a {
  color: #fff;
  text-decoration: underline;
}

/*===============
====== Nav ======
===============*/

#nav {
  list-style: none;
}

#nav a {
  position: relative;
  color: #fff;
  text-decoration: none;
}

#nav a:hover {
  color: #fff;
}

#nav a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #fff;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: akk 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s
}

#nav a:hover:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

/*============================
======= Miscellaneous ======== 
============================*/

a {
  text-decoration: none;
}

li {
  list-style: none;
}


/*======================
====== Selections ======
======================*/

::selection {
  background: #968ed6; /* WebKit/Blink Browsers */
}

::-moz-selection {
  background: #968ed6; /* Gecko Browsers */
}

#footernav-clearfix {
  width: 100%;
}

#footernav {
  max-width: 100%;
}

.footernav-pages {
  padding-top: 10px;
}

.footernav-pages li:not(:last-child) a:after {
  content: "";
  /* width: 0px; */
  background: white;
  margin-left: 8px;
  position: absolute;
  height: inherit;
  color: white;
  z-index: 5;
  border: 1px solid white;
  height: 15px;
}

.footernav-pages li {
  float: left;
  margin-left: 20px;
}

.bottomHeader {
  bottom: 80%;
  background: #000b22;
  width: 6.67%;
  height: 30px;
  margin: 0 auto;
  position: absolute;
  margin: 0;
}


#mini-divider {
  position: absolute;
  top: 1%;
  bottom: 1%;
  border-left: 1px solid white;
  border-bottom: 1px solid white;
}

#icon-nav li {
  float: left;
  background-size: 150%;
  transition: background-color 0.5s ease;
}

#fb:hover {
  background-color: #3f5c9a;
}

#yt:hover {
  background-color: #bd2826;
}

#tt:hover {
  background-color: #3f8dcb;
}

nav ul li ul {
  position: absolute;
  width: 110px;
  background: #02236a;
}

nav ul li ul li {
  width: 110px;
}

nav ul li ul li a {
  right: 20px;
  display: block;
  padding: 15px;
  color:#444;
}

nav ul li ul.fallback {
  display: none;
}

nav ul li:hover ul.fallback {
  display: block;
}

ul.dropdown li {
  position: relative;
}

ul.dropdown li ul {
  position: absolute;
  top: 20px; /* assign the correct value of the top line height */
  left: 0px;
}

Answer 1

此CSS导致文本在.fallback ul

内向左移动

.nav-pages li {
  float: left;
  margin-left: 20px;
}

如果您通过

覆盖此内容

.fallback li{
      margin-left: 10px;
}
.fallback{
    z-index: 10;
}

这应该工作正常。

DEMO

Answer 2

这是因为没有留出空间让名册显示在菜单中，所以它显示为向下。如果您使用30％，它也会显示，但您需要根据您的要求提供值，因为下拉列表还需要显示空间

使用

#nav 
{ 
     margin-left: 25%;
}

http://jsfiddle.net/Lmb3x73r/6/

在下拉导航中将文本移动到左侧

2 个答案: