将文本左移下拉导航

我刚刚完成导航栏，保存了我的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; 
}

来源

2015-04-07 Blake

这个CSS导致左移动你的文字里.fallback ul

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

如果重写此通过

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

这应该做工精细。

DEMO

来源

2015-04-07 04:38:52

它的工作原理，以一个范围......现在盘旋在花名册上，试图下去真的很尴尬。有时当你将鼠标悬停在名册上，然后进入子菜单时，它会消失。 – Blake

@Blake现在看到Demo是由于z-index问题而引起的，而且问题也出现在你的小提琴中。 –

谢谢..不知道谁的答案不对。 – Blake

这是因为名册是在菜单显示所以会出现向下的空间都不剩。如果您使用的30％也将被显示，但你需要根据你的要求提供的价值为下拉也需要空间来显示

使用

#nav 
{ 
    margin-left: 25%; 
}

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

来源

2015-04-07 04:52:43 Reena

将文本左移下拉导航

回答

相关问题