將文本左移下拉導航

我剛剛完成導航欄，保存了我的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

將文本左移下拉導航

回答

相關問題