1. Zuhause
  2. Frage und Antwort
  3. Wie mit HTML und CSS in CSS3

Wie mit HTML und CSS in CSS3

2016-07-20 10 views
-1

Ich bin nur neu ansprechendes Untermenü erstellen, wollte ich auf meiner MEINE ARBEIT 2 Untermenü erstellen, welcheDigital Arts und Videografie sind. Ich bin verwirrt auf der CSS3-Seite, also brauche ich Hilfe. Überprüfen Sie die Vorschau unten und das erwartete Ergebnis, das ich wollte. Vielen Dank !Wie mit HTML und CSS in CSS3

HTML

<!DOCTYPE html> 

<html> 
<link rel="shortcut icon" href="browserlogo.png"> 
<title></title> 


<head> 
<link rel="stylesheet" type="text/css" href="home.css"> 
</head> 

<body> 
<nav> 
<ul> 
<li><img src="logoweb.jpg" id="logo"></li> 
    <li><a href='#'>PROFILE</a></li> 
    <li><a href='#'>MY WORK</a></li> 
    <li><a href='#'>RECORDS</a></li> 
    <li><a href='#'>PUBLICATION</a></li> 
    <li><a href='#'>CONTACT ME</a></li> 
</ul> 
</nav> 




</body> 
</html>

CSS

body{background-color:#000000 ;} 

#logo{ 
position:absolute; 
top:0.5%; 
left:3%; 
width:185px; 
height:59px; 
overflow:hidden; 
} 

#header{ 
position:absolute; 
top:7%; 
left:0%; 
width:1600px; 
height:600px; 
overflow:hidden; 
} 

*{ 
    padding: 0; 
    margin: 0; 
} 


nav{ 
background-color: #233647; 
text-align: right; 
padding: 25px; 
} 

nav li { 
display: inline-block; 
margin: 0px 1px; 
padding-top: 1px; 
} 

nav li a{ 
color: white; 
padding: 25px; 
text-decoration: none; 
font-family: arial; 
} 





nav li a:hover{ 
background-color: white; 
color: #233647; 
}

Vorschau

enter image description here

Outcome Ich wollte

enter image description here

Quelle

2016-07-20 M. M. Human

+0

Sie mit verschachtelten Listen beginnen soll. Und dann bitte eine (richtige) Recherche, denn das ist alles andere als ein neues Thema. – CBroe

Antwort

0 

body{background-color:#000000 ;} 
 
#logo{ 
 
position:absolute; 
 
top:0.5%; 
 
left:3%; 
 
width:185px; 
 
height:59px; 
 
overflow:hidden; 
 
} 
 
#header{ 
 
position:absolute; 
 
top:7%; 
 
left:0%; 
 
width:1600px; 
 
height:600px; 
 
overflow:hidden; 
 
} 
 
*{ 
 
padding: 0; 
 
margin: 0; 
 
} 
 
nav{ 
 
background-color: #233647; 
 
text-align: right; 
 
padding: 25px; 
 
} 
 
nav li { 
 
position:relative; 
 
} 
 
nav li, ul li { 
 
display: inline-block; 
 
margin: 0px 1px; 
 
padding-top: 1px; 
 
} 
 
nav li a { 
 
color: white; 
 
padding: 25px; 
 
text-decoration: none; 
 
font-family: arial; 
 
} 
 
nav li ul li a { 
 
color: white; 
 
padding: 25px; 
 
text-decoration: none; 
 
font-family: arial; 
 
padding:25px ; 
 
display:block; 
 
background:#233647; 
 
text-align:center; 
 
} 
 
nav li ul li{ 
 
width:100%; 
 
} 
 
nav li ul{ 
 
display:none; 
 
position:absolute; 
 
top:42px; 
 
background: #233647; 
 
} 
 
nav li:hover ul{ 
 
display:block; 
 
} 
 
nav li a:hover{ 
 
background-color: white; 
 
color: #233647; 
 
}
<!DOCTYPE html> 
 
<html> 
 
    <link rel="shortcut icon" href="browserlogo.png"> 
 
    <title></title> 
 
    <head> 
 
     <link rel="stylesheet" type="text/css" href="home.css"> 
 
    </head> 
 
    <body> 
 
     <nav> 
 
     <ul> 
 
      <li><img src="logoweb.jpg" id="logo"></li> 
 
      <li><a href='#'>PROFILE</a></li> 
 
      <li> 
 
       <a href='#'>MY WORK</a> 
 
       <ul> 
 
        <li><a href='#'>Digital Arts</a></li> 
 
        <li><a href='#'>Videography</a></li> 
 
       </ul> 
 
      </li> 
 
      <li><a href='#'>RECORDS</a></li> 
 
      <li><a href='#'>PUBLICATION</a></li> 
 
      <li><a href='#'>CONTACT ME</a></li> 
 
     </ul> 
 
     </nav> 
 
    </body> 
 
</html>

Quelle

2016-07-20 14:44:01

+0

Hey bro, Sie tat es! Aber bevor ich erkläre, dass du die richtige Antwort hast, wie bleibst du automatisch auf "MEINE ARBEIT", während sich der Benutzer im Untermenü befindet? Vielen Dank ! –

-2

in Untermenüs alles, was Sie tun müssen, ist einen Code, wie unten in der HTML-Datei

<ul> 
    <li>My Work 
     <ul id = "ul1">Digital Arts</ul> 
     <ul id = "ul2">Videography</ul> 
    </li> 
</ul>

für Sie CSS-Datei zu schreiben, stellen Sie sicher, diese Untermenüs Positionen absolute als

#ul1{ 
    position: absolute; 
}
zu machen

machen Sie dasselbe für ul2. gib es auch oben und links, damit es weiß, wo es stehen soll, es liegt an deiner Seite. lassen Sie mich wissen, ob das wirklich geholfen hat.

Quelle

2016-07-20 14:35:46

+0

Leider hat es nicht funktioniert –

+0

Mine nicht anders mit der Antwort ist, dass Sie richtig sein wählte, ich habe gerade schreiben nicht den ganzen Code für Sie –

Verwandte Themen

 Verwandte Themen