2017-06-18 78 views
1

我想知道爲什麼(尋找實現下拉菜單),我的導航不是水平對齊的,我查找了我知道的每一個錯誤,顯然沒有找不到任何東西。任何人都可以幫我找到錯誤嗎?或者我可以用來使導航對齊的方式? :)不知道爲什麼我的導航不對齊(css)

body { 
 
    background: #182530; 
 
} 
 

 
.clearfix:after { 
 
    display: block; 
 
    clear: both; 
 
} 
 

 
.menu-wrap { 
 
    width: 100%; 
 
    box-shadow: 0px 1px 3px #000000; 
 
    background: #ffffff; 
 
} 
 

 
.menu { 
 
    width: 1000px; 
 
    margin: 0px auto; 
 
} 
 

 
.menu li { 
 
    margin: 0px; 
 
    list-style: none; 
 
    font-family: helvetica; 
 
    font-weight: bold; 
 
    color: #000000; 
 
} 
 

 
.menu a { 
 
    transition: all linear 0.15s; 
 
    color: #000000; 
 
    text-decoration: none; 
 
} 
 

 
.menu li:hover>a, 
 
.menu .current-item>a { 
 
    text-decoration: none; 
 
    color: #be5b70; 
 
} 
 

 
menu>ul>li { 
 
    float: left; 
 
    display: inline-block; 
 
    position: relative; 
 
    font-size: 19px; 
 
} 
 

 
.menu>ul>li>a { 
 
    padding: 10px 40px; 
 
    display: inline-block; 
 
    text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.4); 
 
} 
 

 
.menu>ul>li:hover>a, 
 
.menu>ul>.current-item>a { 
 
    background: #2e2728; 
 
} 
 

 
.submenu { 
 
    width: 10%; 
 
    padding: 5px 0px; 
 
    position: absolute; 
 
    right: auto; 
 
    z-index: -1; 
 
    opacity: .0; 
 
    transition: opacity linear 0.15s; 
 
    background: #2e2728; 
 
} 
 

 
.menu li:hover .submenu { 
 
    z-index: 1; 
 
    opacity: 1; 
 
} 
 

 
.submenu li a { 
 
    display: block; 
 
}
<!doctype html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="utf-8"> 
 
\t <title> 
 
\t \t Test Page 
 
\t </title> 
 
\t <link rel="stylesheet" type="text/css" href="css/stylesheet.css"> 
 
    </head> 
 
    <body> 
 
    \t <header> 
 
    \t \t <div class="menu-wrap"> 
 
    \t \t <nav class="menu"> 
 
    \t \t \t <ul> 
 
    \t \t \t \t <li><a href="#">Home</a></li> 
 
    \t \t \t \t <li><a href="#">About</a></li> 
 
    \t \t \t \t <li> 
 
    \t \t \t \t <a href="current-item">Projects</a> 
 
    \t \t \t \t <ul class="submenu"> 
 
    \t \t \t \t \t <li><a href="#">WebIdentity</a></li> 
 
    \t \t \t \t \t <li><a href="#">LogoDesign</a></li> 
 
    \t \t \t \t \t <li><a href="#">Branding</a></li> 
 
    \t \t \t \t </ul> 
 
    \t \t \t \t </li> 
 
    \t \t \t \t <li><a href="#">Contacts</a></li> 
 
    \t \t \t </ul> 
 
    \t \t </nav> 
 
    \t \t \t 
 
    \t \t </div> 
 
    \t </header> 
 
    </body> 
 
</html>

我怎樣才能對準我的導航?錯誤在哪裏?

回答

0

也許你需要

.menu > ul > li { 
    display: inline-block; 
} 
+0

解決!我忘了「。」在課前......對不起,謝謝你的答案! :) – Vitto