Razorblade
SNF-Inventarnr. #9356663
Hi!
Ich schaffe es nicht dass das 2. Submenü meines horizontalen Menüs nicht überlappt.
Weiters sollte zwischen dem 1. und 2. Submenü horizontal der gleiche Abstand sein wie vertikal, aber auch das haut nicht hin -.-
Kann mir vielleicht wer sagen was ich da falsch mache?
Danke im Voraus
RB
Ich schaffe es nicht dass das 2. Submenü meines horizontalen Menüs nicht überlappt.
Weiters sollte zwischen dem 1. und 2. Submenü horizontal der gleiche Abstand sein wie vertikal, aber auch das haut nicht hin -.-
Kann mir vielleicht wer sagen was ich da falsch mache?
Code:
<html>
<head>
<title>Testmenu</title>
<style type="text/css">
body {
font-size: 14px;
font-family: Calibri, Tahoma, Arial, sans-serif;
color: #ffffff;
background-color: #000e1a;
margin: 0;
padding: 0;
}
#menu {
text-align: center;
height: 50px;
margin: 10px;
width: 1000px;
min-width: 1000px;
}
#menu div {
clear: left;
}
#menu ul {
margin: 0;
padding: 0;
text-align: center;
}
#menu ul li {
list-style: none;
float: left;
position: relative;
margin: 0.4em;
padding: 0;
border-radius: 10px;
border: rgba(150, 150, 150, .5) solid 1px;
border-radius: 7px;
margin: 5px;
background-color: #000a12;
background-color: rgba(0, 10, 18, .5);
}
#menu ul li ul {
margin: 0;
padding: 0;
position: absolute;
top: 1.6em;
left: -0.4em;
display: none;
}
#menu ul li:hover ul {
display: block;
}
#menu ul li ul li {
float: none;
display: block;
margin-bottom: 0.2em;
}
#menu ul a,
#menu span {
display: block;
width: 6.4em;
padding: 0.2em 1em;
text-decoration: none;
color: #ffffff;
}
#menu ul a:hover,
#menu ul span,
li a.active,
#menu ul li ul span {
border-radius: 7px;
text-shadow: #9acbff 0px 0px 7px, #9acbff 0px 0px 7px, #9acbff 0px 0px 7px;
}
#menu ul li ul li ul {
margin: 0;
padding: 0;
position: absolute;
top: -1px;
left: 8.4em;
display: none;
margin-right: 0.2em;
}
#menu ul li ul li ul li {
margin: 0;
padding: 0;
position: absolute;
display: none;
}
#menu ul li ul li:hover ul li {
display: block;
float: left;
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href='#'>Home</a></li>
<li class="active has-sub"><a href='#'>Products</a>
<ul>
<li class="has-sub"><a href='#'>Product 1</a>
<ul>
<li><a href='#'>Sub Product 1</a></li>
<li><a href='#'>Sub Product 2</a></li>
</ul>
</li>
<li><a href='#'>Product 2</a>
<ul>
<li><a href='#'>Sub Product 3</a></li>
<li><a href='#'>Sub Product 4</a></li>
</ul>
</li>
<li><a href='#'>Product 3</a></li>
</ul>
</li>
<li><a href='#'>About</a></li>
<li><a href='#'>Contact</a></li>
</ul>
</div>
</body>
</html>
Danke im Voraus
RB