Beiträge von beginner1210

beginner1210

Wie wuerde es dann für mobile Geräte aussehen?

beginner1210

Hallo,

ich habe folgendes Problem ich würde gerne ein Menü mittig stellen jedoch klappt es nicht da es immer Links- oder Rechtsbündig gemacht wird.
Vvl könnt ihr mir helfen!

CSS - Code:

Code

/* CSS Document */body {
  background: grey;
}




* {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  box-sizing: border-box;
}




nav {
  float: left;
  width: 100%;
  background: red;
  font-size: 16px;
}




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




nav a {
  display: block;
  color: #fff;
  text-decoration: none;
}




nav ul li {
  position: relative;
  float: left;
  list-style: none;
  color: #fff;
  transition: 0.5s;
}




nav ul li a {
  padding: 20px;
}




nav ul > li.submenu > a:after {
  position: relative;
  float: right;
  content: '';
  margin-left: 10px;
  margin-top: 5px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #fff;
  border-bottom: 5px solid transparent;
}




nav ul ul li.submenu > a:after {
  margin-left: auto;
  margin-right: -10px;
  border-left: 5px solid #fff;
  border-right: 5px solid transparent;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}




nav ul li:hover {
  background: #4096ee;
}




nav ul ul {
  position: absolute;
  top: -9999px;
  left: -9999px;
  background: #333;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
  z-index: 1;
}




nav ul ul li {
  float: none;
  width: 200px;
  border-bottom: 1px solid #555;
}




nav ul ul li a {
  padding: 10px 20px;
}




nav ul ul li:last-child {
  border-bottom: none;
}




nav ul li:hover > ul {
  top: 100%;
  left: 0;
}




nav ul ul li:hover > ul {
  top: 0;
  left: 200px;
}

Alles anzeigen

HTML Code:

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <link rel="stylesheet" type="text/css" href="/menu/Style.css" />
  <title></title>
  </head>
  <body>
  <nav>
  <ul>
    <li><a href="#" title="Nach Hause">Punkt1</a></li>
    <li class="submenu"><a href="#" title="Punkt2">Punkt2</a>
      <ul>
        <li class="submenu"><a href="#" title="Punkt2.1">Punkt2.1</a>
          <ul>
            <li><a href="#" title="Punkt2.1.1">Punkt2.1.1</a></li>
            <li><a href="#" title="Punkt2.1.2">Punkt2.1.2</a></li>
            <li><a href="#" title="Punkt2.1.3">Punkt2.1.3</a></li>
            <li><a href="#" title="Punkt2.1.4">Punkt2.1.4</a></li>
          </ul>
        </li>
        <li class="submenu"><a href="#" title="Punkt2.2">Punkt2.2</a>
          <ul>
            <li><a href="#" title="Punkt2.2.1">Punkt2.2.1</a></li>
            <li><a href="#" title="Punkt2.2.2">Punkt2.2.2</a></li>
            <li class="submenu"><a href="#" title="Punkt2.2.3">Punkt2.2.3</a>
              <ul>
                <li class="submenu"><a href="#" title="Punkt2.2.3.1">Punkt2.2.3.1</a>
                  <ul>
                    <li><a href="#" title="Punkt2.2.3.1.1">Punkt2.2.3.1.1</a></li>
                    <li><a href="#" title="Punkt2.2.3.1.2">Punkt2.2.3.1.2</a></li>
                  </ul>
                </li>
                <li><a href="#" title="Punkt2.2.3.2">Punkt2.2.3.2</a></li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="#" title="Punkt3">Punkt3</a></li>
    <li><a href="#" title="Punkt4">Punkt4</a></li>
    <li><a href="#" title="Punkt5">Punkt5</a></li>
  </ul>
</nav>




  </body>
</html>

Alles anzeigen