2layer
Newbie
- Registriert
- Juni 2013
- Beiträge
- 6
Hi,
ich arbeite gerade an meiner ersten Website und versuche im Moment ein Dropdown-Menu zu vergrößern ohne dass die Sub-Menüs "abhauen". Außerdem habe ich keinen Weg gefunden, den vertikalen Abstand zwischen Text und div-Box (bei der Hauptmenüleiste) zu ändern, ohne die Submenüs zu verschieben. Die Suchfunktion konnte mir hier nicht weiterhelfen.
Im ersten Bild ist das zu vergrößernde Dropdown Menü und im zweiten Bild die größere Vorlage für das Hauptmenü(ohne Submenüs) mit größerem vertikalen Abstand zwischen Text und div-Box.
CSS:
<style>
body {font-family:Lato;}
html,body {
margin:0;
padding:0;
height:100%;
}
#centeredmenu {
background-color:rgb(18,29,33);
clear:both;
float:left;
margin:0;
padding:0;
width:100%;
font-family:Lato;font-weight:normal;
font-size:90%;
z-index:1000;
position:relative;
}
#centeredmenu ul {
margin:0;
padding:0;
list-style:none;
position:relative;
}
#centeredmenu ul li {
margin:0 0 0 0px;
padding:0;
float:left;
position:relative;
}
#centeredmenu ul li a {
display:block;
margin:0;
padding:.6em .5em .4em;
font-size:1em;
line-height:1em;
background:rgb(18,29,33);
text-decoration:none;
color:rgb(241,241,241);
font-family:Lato;
}
#centeredmenu ul li.active a {
color:rgb(241,241,241);
background:rgb(38,47,50);
}
#centeredmenu ul li a:hover {
background:#36f;
color:rgb(241,241,241);
}
#centeredmenu ul li:hover a,
#centeredmenu ul li.hover a {
background:rgb(38,47,50);
color:rgb(241,241,241);
}
#centeredmenu ul ul {
display:none;
position:absolute;
top:2em;
left:0;
right:auto;
width:10em;
}
#centeredmenu ul ul li {
left:auto;
margin:0;
clear:left;
width:100%;
}
#centeredmenu ul ul li a,
#centeredmenu ul li.active li a,
#centeredmenu ul li:hover ul li a,
#centeredmenu ul li.hover ul li a {
font-size:.8em;
font-weight:normal;
background:rgb(38,47,50);
color:rgb(185,191,193);
line-height:1.4em;
}
#centeredmenu ul ul li a:hover,
#centeredmenu ul li.active ul li a:hover,
#centeredmenu ul li:hover ul li a:hover,
#centeredmenu ul li.hover ul li a:hover {
background:rgb(58,59,65);
color:rgb(241,241,241);
}
#centeredmenu ul ul.last {
left:auto;
right:0;
}
#centeredmenu ul li:hover ul,
#centeredmenu ul li.hover ul {
display:block;
}
</style>
HTML:
<body>
<div id="centeredmenu">
<ul>
<li><a href="#">HOME</a>
<ul>
<li><a href="http://www.google.com">Google</a></li>
<li><a href="#">Link two</a></li>
<li><a href="#">Link three</a></li>
<li><a href="#">Link four</a></li>
<li><a href="#">Link five</a></li>
</ul>
</li>
<li class="active"><a href="#" class="active">DISCOVER</a>
<ul>
<li><a href="#">Link one</a></li>
<li><a href="#">Link two</a></li>
<li><a href="#">Link three</a></li>
<li><a href="#">Link four</a></li>
<li><a href="#">Link five</a></li>
</ul>
</li>
<li><a href="#">ABOUT</a>
<ul>
<li><a href="#">Link one</a></li>
<li><a href="#">Link two</a></li>
<li><a href="#">Link three</a></li>
<li><a href="#">Link four</a></li>
<li><a href="#">Link five</a></li>
</ul>
</li>
<li><a href="#">Tab four</a>
<ul class="last">
<li><a href="#">Link one</a></li>
<li><a href="#">Link two</a></li>
<li><a href="#">Link three</a></li>
<li><a href="#">Link four</a></li>
<li><a href="#">Link five</a></li>
</ul>
</li>
</ul>
</div>
</body>
ich arbeite gerade an meiner ersten Website und versuche im Moment ein Dropdown-Menu zu vergrößern ohne dass die Sub-Menüs "abhauen". Außerdem habe ich keinen Weg gefunden, den vertikalen Abstand zwischen Text und div-Box (bei der Hauptmenüleiste) zu ändern, ohne die Submenüs zu verschieben. Die Suchfunktion konnte mir hier nicht weiterhelfen.
Im ersten Bild ist das zu vergrößernde Dropdown Menü und im zweiten Bild die größere Vorlage für das Hauptmenü(ohne Submenüs) mit größerem vertikalen Abstand zwischen Text und div-Box.
CSS:
<style>
body {font-family:Lato;}
html,body {
margin:0;
padding:0;
height:100%;
}
#centeredmenu {
background-color:rgb(18,29,33);
clear:both;
float:left;
margin:0;
padding:0;
width:100%;
font-family:Lato;font-weight:normal;
font-size:90%;
z-index:1000;
position:relative;
}
#centeredmenu ul {
margin:0;
padding:0;
list-style:none;
position:relative;
}
#centeredmenu ul li {
margin:0 0 0 0px;
padding:0;
float:left;
position:relative;
}
#centeredmenu ul li a {
display:block;
margin:0;
padding:.6em .5em .4em;
font-size:1em;
line-height:1em;
background:rgb(18,29,33);
text-decoration:none;
color:rgb(241,241,241);
font-family:Lato;
}
#centeredmenu ul li.active a {
color:rgb(241,241,241);
background:rgb(38,47,50);
}
#centeredmenu ul li a:hover {
background:#36f;
color:rgb(241,241,241);
}
#centeredmenu ul li:hover a,
#centeredmenu ul li.hover a {
background:rgb(38,47,50);
color:rgb(241,241,241);
}
#centeredmenu ul ul {
display:none;
position:absolute;
top:2em;
left:0;
right:auto;
width:10em;
}
#centeredmenu ul ul li {
left:auto;
margin:0;
clear:left;
width:100%;
}
#centeredmenu ul ul li a,
#centeredmenu ul li.active li a,
#centeredmenu ul li:hover ul li a,
#centeredmenu ul li.hover ul li a {
font-size:.8em;
font-weight:normal;
background:rgb(38,47,50);
color:rgb(185,191,193);
line-height:1.4em;
}
#centeredmenu ul ul li a:hover,
#centeredmenu ul li.active ul li a:hover,
#centeredmenu ul li:hover ul li a:hover,
#centeredmenu ul li.hover ul li a:hover {
background:rgb(58,59,65);
color:rgb(241,241,241);
}
#centeredmenu ul ul.last {
left:auto;
right:0;
}
#centeredmenu ul li:hover ul,
#centeredmenu ul li.hover ul {
display:block;
}
</style>
HTML:
<body>
<div id="centeredmenu">
<ul>
<li><a href="#">HOME</a>
<ul>
<li><a href="http://www.google.com">Google</a></li>
<li><a href="#">Link two</a></li>
<li><a href="#">Link three</a></li>
<li><a href="#">Link four</a></li>
<li><a href="#">Link five</a></li>
</ul>
</li>
<li class="active"><a href="#" class="active">DISCOVER</a>
<ul>
<li><a href="#">Link one</a></li>
<li><a href="#">Link two</a></li>
<li><a href="#">Link three</a></li>
<li><a href="#">Link four</a></li>
<li><a href="#">Link five</a></li>
</ul>
</li>
<li><a href="#">ABOUT</a>
<ul>
<li><a href="#">Link one</a></li>
<li><a href="#">Link two</a></li>
<li><a href="#">Link three</a></li>
<li><a href="#">Link four</a></li>
<li><a href="#">Link five</a></li>
</ul>
</li>
<li><a href="#">Tab four</a>
<ul class="last">
<li><a href="#">Link one</a></li>
<li><a href="#">Link two</a></li>
<li><a href="#">Link three</a></li>
<li><a href="#">Link four</a></li>
<li><a href="#">Link five</a></li>
</ul>
</li>
</ul>
</div>
</body>
