2017-06-18 6 views
1

Ich frage mich, warum (auf der Suche nach einem Dropdown-Menü), ist mein Nav horizontal ausgerichtet, ich habe für jeden Fehler, den ich weiß, offensichtlich didn gesucht Ich finde nichts. Kann mir jemand helfen, den Fehler zu finden? Oder eine Möglichkeit, mit der ich das Navi ausrichten kann? :)Weiß nicht, warum mein Nav nicht ausgerichtet ist (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>

Wie kann ich meine nav ausrichten? Wo ist der Fehler? vielleicht

Antwort

0

Sie benötigen

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

GELÖST fixiert !! Ich habe das "." vor der Klasse .... Entschuldigung und danke für die Antworten! :) – Vitto

Verwandte Themen