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;
}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>