2
Ich habe 3 Dropdown-Menüs unter nav, und ich möchte sie nach links, Mitte und rechts ausrichten. Die linke und rechte Ausrichtung arbeiten mit Float, aber ich habe Schwierigkeiten, ein Dropdown-Menü auf die Mitte auszurichten. Bitte beachten Sie den css-Selektor .inline-menu.middle-menu unter https://jsfiddle.net/xv51vkc7/.CSS - Dropdown-Menüs nach links, Mitte und rechts ausrichten
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Title</title>
<link rel="stylesheet" type="text/css" href="css/theme_1.css">
</head>
<body>
<nav>
<ul class="inline-menu left-menu">
<li><a href="">Left-A</a>
<ul>
<li><a href="">1</a></li>
<li><a href="">2</a></li>
</ul>
</li>
<li><a href="">Left-B</a>
<ul>
<li><a href="">1</a></li>
<li><a href="">2</a></li>
</ul>
</li>
</ul>
<ul class="inline-menu middle-menu">
<li><a href="">Middle-A</a>
<ul>
<li><a href="">1</a></li>
<li><a href="">2</a></li>
</ul>
</li>
<li><a href="">Middle-B</a>
<ul>
<li><a href="">1</a></li>
<li><a href="">2</a></li>
</ul>
</li>
</ul>
<ul class="inline-menu right-menu">
<li><a href="">Right-A</a>
<ul>
<li><a href="">1</a></li>
<li><a href="">2</a></li>
</ul>
</li>
<li><a href="">Right-B</a>
<ul>
<li><a href="">1</a></li>
<li><a href="">2</a></li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
body{
background-color: #eee;
padding: 0;
}
.inline-menu,
.inline-menu ul{
list-style: none;
padding: 0;
margin: 0;
}
.inline-menu > li{
display: inline-block;
padding-right: 25px;
background-color: yellow;
position: relative;
}
.inline-menu a{
text-decoration: none;
}
.inline-menu > li > ul{
display: none;
position: absolute;
background-color: green;
}
.inline-menu > li:hover > ul{
display: block;
width: 100%; /* same width as parent */
}
.inline-menu.left-menu{
float: left;
}
.inline-menu.right-menu{
float: right;
}
.inline-menu.middle-menu{
}