Beiträge von ElViruZ

ElViruZ

Danke basti für die erklärung!

ElViruZ

Basti danke dir!

Schau schon ganz gut aus.

Nur sollte das Navi-Menü nicht so lang gezogen sein und die Untermenüs sollten direkt unterhalb von Produkte sein.

Wäre das noch machbar?

Wenn du Zeit hast, könntest du mir bitte erklären was ich falsch gemacht habe?

Danke dir!!!

ElViruZ

Hallo Leute,

Hab seit kurzem mit HTML5 & CSS3 angefangen.

Möchte auf meiner Homepage ein verschachteltes Dropdown Menü mit CSS3 erstellen.

Hab bei dieser Seite eins gefunden

https://wiki.selfhtml.org/wiki/CSS/Tutor…t_CSS_gestalten

Nun hab ich das in meine Homepage eingefügt aber es funktioniert nicht richtig.

Die anderen Menü punkte nach dem Dropdown Menü werden nach unten verschoben und das Dropdown menü wird auch nicht richtig angezeigt.

Könnte mir jemmand bitte sagen was ich da falsch mache?

Hier der HTML Code

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>test</title>
    <link rel="stylesheet" href="style.css" type="text/css" />
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function() {
          $('.menubutton').click(function() {
            $('nav').slideToggle('slow');
          });
      });
    </script>
  </head>
  <body>
      <section id="menubar">
          <ul>
              <li><a class="menubutton" href="#menu"><img src="images/menubar.png" /></a></li>
          </ul>
      </section>
      <header>
        <h1>SONNENWIND BIO KG</h1>
      </header>
      <nav class="nav">
        <ul>
          <li><a class="active" href="index.html">Home</a></li>
          <li><a href="kindergaerten.html">Kindergärten</a></li>
          <li><a href="index.html">Gastronomie</a></li>
          <li><a href="index.html">Wiederverkauf</a></li>
          <li tabindex="0"><a href="index.html">Produkte</a>
            <ul class="submenu">
              <li><a tabindex="0" href="#">Gemüse</a></li>
              <li><a tabindex="0" href="#">Suppen</a></li>
            </ul>
          </li>
          <li><a href="index.html">Links</a></li>
          <li><a href="index.html">Kontakt</a></li>
        </ul>
      </nav>
      <section id="main">
        <article>
          <h2><span class="kat">Über uns | </span><span class="sidekat">100% Biogenuss</span></h2>
          <img src="images/artikelbild.jpg" />
          <p>ARtikel</p>
        </article>
          <aside>
            <section>
              <h2>Weiter Artikel</h2>
              <ul>
                <li>Hier werde ich das Video einfügen!</li>
                <li>Nächstes Video</li>
                <li>und noch was</li>
            </section>
            <section>
              <h2>Textfeld</h2>
              <p>Zertifikat</p>
            </section>
            <section>
              <h2>Kategorien</h2>
              <ul>
                <li>Text 1</li>
                <li>Text 2</li>
                <li>Text 3</li>
              </ul>
            </section>
          </aside>
      </section>
      <footer>
        <ul>
          <li>&copy; </li>
          <li>Kontakt</li>
          <li>Datenschutz</li>
        </ul>
      </footer>
  </body>
</html>

Alles anzeigen

Hier der CSS3

CSS

/* Allgemeiner Style */

body {
  background: #DCDCDC;
  font-size: 100%;
  margin: 0em;
  padding: 0em;
}

h1 {
  font-size: 2.5em;
  line-height: 3.8em;
  font-family: Helvetica;
  font-weight: 100;
  color: #E2DBDB;
  margin: 0em;
}

h2 {
  font-size: 1.563em;
  line-height: 1.8em;
  font-family: Helvetica;
  font-weight: 100;
  color: #2F2D2C;
  margin: 0em;
  padding: 1.25em;
  text-align: left;
}

p {
  line-height: 1.25em;
  font-family: Helvetica;
  font-weight: 100;
  color: #2F2D2C;
  margin: 0em;
  padding: 0.8em;
  text-align: justify;
}

ul {
  margin: 0px;
  padding: 0px;
}

li {
  list-style: square;
  font-family: Helvetica;
  font-weight: 100;
  color: #2F2D2C;
  line-height: 1.25em;
  margin: 0.313em 0em 0.313em 0em;
  padding: 0em;
}

img {
  width: 90%;
  height: auto;
  max-width: 100%;
}

a {
  text-decoration: none;
}

/* On Top Bar */

#menubar {
  display: block;
  background: #FFFFFF;
}

#menubar ul {
  display: block;
  width: 2em;
  padding: 0.9em;
}

#menubar ul li {
  display: inline;
}

#menubar ul li a.menubutton {
  display: none;
}

/* Header */

header {
  display: block;
  background: #2F2D2C;
  text-align: center;
}

/* Navigation */

nav {
  display: block;
  height: 2.5em;
  background: #FFFFFF;
  text-align: center;
}

nav ul {
  display: block;
}

nav ul li {
  display: inline;
  margin: 0em 0.188em 0em 0.188em;
}

nav ul li a {
  color: #454040;
  font-size: 1.125em;
  line-height: 2.5em;
  padding: 0.563em 0.938em 0.375em 0.938em;
  transition: background 0.2s;
  -webkit-transition: background 0.2s;
}

nav ul li a:hover {
  background: #DBD9D8;
  border-bottom: 0.188em solid #E7590B;
}

nav ul li a.active {
  border-bottom: 0.188em solid #E7590B;
}

/*     submenu navigation links      */
nav .submenu {
  visibility: hidden;
  height: 0;
  z-index: 1000;
}
nav .submenu li {
  display: block;
  /* width: 15em; */
}

/**     Show the submenu on hover, focus     **/
nav li:hover .submenu,
nav li:active .submenu,
nav li:focus .submenu,
nav li:focus-within .submenu {
  visibility: visible;
  height: auto;
}


/* Content Area */

#main {
  display: block;
  width: 96%;
  max-width: 980px;
  margin: 1.25em auto;
  padding: 0em;
}

#main article {
  display: inline-block;
  width: 65.3%;
  background: #FFFFFF;
  vertical-align: top;
  margin: 0em;
  padding: 0em;
  text-align: center;
}

#main article img {
  max-width: 560px;
  max-height: 450px;
  box-shadow: 0px 0px 10px -5px #4C4948;
  border-radius: 5px;
}

#main article p {
  line-height: 1.25em;
  font-family: Helvetica;
  font-weight: 100;
  color: #024f28;
  margin: 0em;
  padding: 0.8em;
  text-align: justify;
}

#main article h2 {
  padding: 1em 1.8em 1em 1.8em;
}

#main article span.kat {
  color: #72D033;
}

#main article span.fett {
  font-weight: 800;
}

#main article span.sidekat {
  color: #024f28;
}

#main aside {
  display: inline-block;
  width: 30.6%;
  margin-left: 3%;
  padding: 0em;
  vertical-align: top;
}

#main aside section {
  margin-bottom: 1.563em;
  background: #FFFFFF;
  border-bottom: 0.188em solid #E7590B;
}

#main aside section ul {
  padding: 0em 1.875em 1.25em 2.5em;
}


/* Footer */

footer {
  display: block;
  background: #2F2D2C;
  text-align: center;
}

footer ul {
  display: block;
  width: 100%;
  max-width: 980px;
  text-align: left;
  margin: 0px auto;
}

footer ul li {
  display: inline-block;
  font-size: 0.8em;
  line-height: 2.8em;
  color: #E2DBDB;
  padding: 0em 0.625em 0em 0.625em
}

footer ul li a {
  color: #E2DBDB;
}

/* Mobile Style */

@media screen and (max-width: 600px) {
  body {
    font-size: 90%;
  }
}

@media screen and (max-width: 600px) {
  #main aside , #main article {
    width: 100%;
    display: block;
    margin: 0.625em 0em 0.625em 0em;
  }
}

@media screen and (min-width: 550px) {
  nav.nav {
    display: block !important;
  }
}

@media screen and (max-width: 550px) {
  body {
    font-size: 86%;
  }
  #menubar ul li a.menubutton {
    display: block;

  }
  nav {
    display: none;
    height: auto;
  }
  nav ul li {
    display: block;
    margin: 0.3em 0em 0.3em 0em;
  }
}

Alles anzeigen

Beiträge von ElViruZ

CSS3 Dropdown Menü funktioniert nicht richtig

CSS3 Dropdown Menü funktioniert nicht richtig

CSS3 Dropdown Menü funktioniert nicht richtig