Wie kann ich mein Menü ansprechen lassen?

Question

Ich erstelle meinen ersten Blog zur Seite, aber reagiert nicht. Kann mir jemand helfen, dieses kleine Menü ansprechend zu machen? Mit meinem PC sehe ich schlecht und auch mit anderen PC ist nicht gut, wenn ich Zoom/Rezoom es ist eine Katastrophe. Für den Drucker ist viele schlecht: D

hier die Geige:

main { 
 
    margin: 1px; 
 
} 
 
aside.left { 
 
    background-color: #eee; 
 
    height: 10%; 
 
    width: 15%; 
 
    padding: 2.5%; 
 
    display: block; 
 
    border: 1px solid #000; 
 
} 
 
aside.left > p { 
 
    color: #444; 
 
    text-align: center; 
 
    display: inline-block; 
 
} 
 
aside.left > nav > ul { 
 
    list-style: none; 
 
    text-align: center; 
 
    display: inline-block; 
 
    margin: 0 auto; 
 
} 
 
aside.left > nav > ul > li { 
 
    display: block; 
 
    margin-top: 20px; 
 
    position: relative; 
 
    bottom: 20%; 
 
} 
 
aside.left > nav > ul > li > a { 
 
    text-decoration: none; 
 
    color: #fff; 
 
    background-color: #444; 
 
    padding: 10%; 
 
    transition: all 1s ease; 
 
} 
 
aside.left > nav > ul > li > a:hover { 
 
    color: #444; 
 
    background-color: #fff; 
 
} 
 
aside.left > p > img { 
 
    border-radius: 100%; 
 
    width: 100px; 
 
    border: 3px solid #444; 
 
} 
 
aside.right { 
 
    width: 500px; 
 
    position: relative; 
 
    left: 170px; 
 
    background-color: #eee; 
 
    border: 1px solid #000; 
 
    line-height: 100px; 
 
    bottom: 310px; 
 
}

<main> 
 
    <aside class="left"> 
 
    <p>Mattew 
 
     <img src="http://avatarfiles.alphacoders.com/456/45610.png" alt="avatar"> 
 
    </p> 
 
    <nav> 
 
     <ul> 
 
     <li><a href="1#2">Home</a> 
 
     </li> 
 
     <li><a href="2#2">About</a> 
 
     </li> 
 
     <li><a href="3#2">Contact</a> 
 
     </li> 
 
     </ul> 
 
    </nav> 
 
    </aside> 
 
    <aside class="right"> 
 
    <article> 
 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam nam a non numquam, architecto doloribus nulla voluptatum vel possimus facilis odio laudantium quod aut dolorum, obcaecati cupiditate explicabo. Eum, magnam! 
 
    </article> 
 
    </aside> 
 
</main>

Answer 1

Sie müssen min-width zum Behälter Menü hinzufügen und das Hinzufügen von left: 0; wird auch das Menü halten helfen links, aber es hängt von dir ab.

Try this:

aside.left { 
    background-color: #eee; 
    height: 10%; 
    width: 15%; 
    min-width: 100px; 
    padding: 2.5%; 
    left: 0; 
    display: block; 
    border: 1px solid #000; 
} 

Hier ist die Fiddle