bootstrap下拉菜單不對齊

我似乎無法弄清楚爲什麼我的菜單不能正確對齊子下拉菜單。它們顯示在它的父單元格的下邊緣，它試圖在它們之間導航幾乎是不可能的。您必須向右對角下降以獲得下一個菜單。 http://imgur.com/zxWcmZf「菜單的屏幕截圖」bootstrap下拉菜單不對齊

我已經在下面發佈了菜單的代碼，對於我缺少的東西，任何人都能脫穎而出嗎？這是我第一次玩bootstrap。感謝每個人的時間幫助解決這個問題。編輯：對不起，我忘了CSS不知道我在想什麼。這是關於它的CSS。感謝您的輸入到目前爲止:)

/* css3 menu */ 
ul#css3-menu{ 
    width: 940px; 
    min-width: 940px; 
    margin: 0 auto; 
    list-style: none; 
    font-family: 'Open Sans', Arial, "MS Trebuchet", sans-serif; 
    height: 46px; 
    padding: 0; 
} 

ul#css3-menu > li{ 
    display: block; 
    float: left; 
    -webkit-transition: background .4s linear; 
    -moz-transition: background .4s linear; 
    -ms-transition: background .4s linear; 
    -o-transition: background .4s linear; 
    transition: background .4s linear; 

    <!--[if IE]> 
    position: relative; 
    <![endif]--> 
} 

ul#css3-menu > li:first-child{ 
    border-left: none !important; 
    -webkit-border-top-left-radius: 4px; 
    -webkit-border-bottom-left-radius: 4px; 

    -moz-border-radius-topleft: 4px; 
    -moz-border-radius-bottomleft: 4px; 

    -ms-border-top-left-radius: 4px; 
    -ms-border-bottom-left-radius: 4px; 

    -o-border-top-left-radius: 4px; 
    -o-border-bottom-left-radius: 4px; 

    border-top-left-radius: 4px; 
    border-bottom-left-radius: 4px; 
} 

ul#css3-menu > li:last-child{ 
    border-right: none !important; 
} 


ul#css3-menu > li > a{ 
    display: block; 
    padding: 15px 30px; 
    color: white; 
    text-decoration: none; 
    font-weight: 600; 
     font-weight: bold; 
} 

/* 
ul#css3-menu > li:hover > div{ 
    -webkit-transform: translateY(-80px); 
    -moz-transform: translateY(-80px); 
    -ms-transform: translateY(-80px); 
    -o-transform: translateY(-80px); 
    transform: translateY(-80px); 

} 
*/ 
/*visibility: visible;*/ 

ul#css3-menu > li > div{ 
    -webkit-transition: -webkit-transform .2s linear; 
    -moz-transition: -moz-transform .2s linear; 
    -ms-transition: -ms-transform .2s linear; 
    -o-transition: -o-transform .2s linear; 
    transition: transform .2s linear; 
    text-align: center; 
    margin: 0 auto; 
    -webkit-transform: translateY(-60px); 
    -moz-transform: translateY(-60px); 
    -ms-transform: translateY(-60px); 
    -o-transform: translateY(-60px); 
    transform: translateY(-60px); 
    width: 37px; 
    height: 37px; 
    /*visibility: hidden;*/ 
    margin-bottom: -37px; 
    z-index: -1; 

    <!--[if IE]> 
    margin-top: -60px; 
    <![endif]--> 

} 


ul#css3-menu.blue > li > div{ 
    background: url(../img/icons-blue.png) 0 0 no-repeat; 
} 

.navbar-wrapper { 
    background: #2773AE; 
    background-color:#2773AE; filter: progid:DXImageTransform.Microsoft.dropShadow(color=#2773AE, offX=0, offY=0, positive=true); 
    box-shadow: 0 -10px 8px -10px #074979 inset, 0 10px 8px -10px #074979 inset; 
    -webkit-box-shadow: 0 -10px 8px -10px #074979 inset, 0 10px 8px -10px #074979 inset; 
    -moz-box-shadow: 0 -10px 8px -10px #074979 inset, 0 10px 8px -10px #074979 inset; 
} 
ul#css3-menu.blue{ 
    background: #2773AE; 
    background-color:#2773AE; filter: progid:DXImageTransform.Microsoft.dropShadow(color=#2773AE, offX=0, offY=0, positive=true); 
    box-shadow: 0 -10px 8px -10px #074979 inset, 0 10px 8px -10px #074979 inset; 
    -webkit-box-shadow: 0 -10px 8px -10px #074979 inset, 0 10px 8px -10px #074979 inset; 
    -moz-box-shadow: 0 -10px 8px -10px #074979 inset, 0 10px 8px -10px #074979 inset; 
} 

ul#css3-menu.blue > li{ 
    border-right: 1px #074979 solid; 
    border-left: 1px #3e92d0 solid; 
     height: 46px; 
} 

ul#css3-menu.blue > li:hover{ 
    background: #074979; 
}

來源

2013-06-25 mike west

這是你的額外的CSS文件的東西（你有沒有貼），是造成你張貼了這個，而不是HTML，也沒有任何引導的CSS文件。當我測試你發佈的HTML（下面我的整個HTML文件）時，我得到的下拉列表符合預期：http://imgur.com/XyYV5pE。

您可能想要發佈您正在包含的CSS，以便人們可以查看可能導致此問題的原因 - 或者簡化您的CSS以裸露骨骼，並逐個添加每個部分以追蹤罪魁禍首。

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

<head> 
    <link href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css" media="screen" rel="stylesheet" type="text/css"/> 
    <link href="http://twitter.github.io/bootstrap/assets/css/bootstrap-responsive.css" media="screen" rel="stylesheet" type="text/css"/> 
    <script src="http://code.jquery.com/jquery.min.js"></script> 
    <script src="http://twitter.github.io/bootstrap/assets/js/bootstrap.js"></script> 
</head> 

<body> 
<!--your exact markup posted in its entirety, unaltered, here--> 
</body>

來源

2013-06-26 04:06:00 DKhanal

感謝您的測試和戳我遺忘的CSS。編輯原始帖子來顯示它。 –

我終於能夠追查導致我的問題的CSS。我感謝你的幫助和時間。 –

有同樣的問題。你知道罪魁禍首是@mikewest嗎？ –

bootstrap下拉菜單不對齊

回答

相關問題