nicht angemeldet
Submenü - Größe ändern
Matthias ApselHallo zusammen,
ich versuche die Breite meines Submenüs zu verkleinern, doch irgendwie sehe ich den Wald vor lauter Bäumen nicht. Das Menü ist ungefähr so aufgebaut:
<div id='cssmenu'>
<ul>
<li class='active '><a href=''><span></span></a></li>
<li><a href=''><span></span></a></li>
<li class='has-sub '><a href='#'><span></span></a>
<ul>
<li><a href=''><span></span></a></li>
<li><a href=''><span></span></a></li>
<li><a href=''><span></span></a></li>
</ul>
</li>
<li class='has-sub '><a href='#'><span></span></a>
<ul>
<li class='has-sub '><a href='#'><span></span></a>
<ul>
<li><a href='#'><span></span></a></li>
...
Die CSS-Eigenschaften fürs Menü sehen so aus:
#cssmenu > ul {
list-style: none;
margin: 0;
padding: 0;
vertical-align: baseline;
line-height: 1;
}
/* The container */
#cssmenu > ul {
display: block;
position: relative;
width: 150px;
}
/* The list elements which contain the links */
#cssmenu > ul li {
display: block;
position: relative;
margin: 0;
padding: 0;
width: 150px;
}
/* General link styling */
#cssmenu > ul li a {
/* Layout */
display: block;
position: relative;
margin: 0;
border-top: 1px dotted #3a3a3a;
border-bottom: 1px dotted #1b1b1b;
padding: 11px 20px;
width: 110px;
/* Typography */
font-family: Helvetica, Arial, sans-serif;
color: #d8d8d8;
text-decoration: none;
text-transform: uppercase;
text-shadow: 0 1px 1px #000;
font-size: 13px;
font-weight: 300;
/* Background & effects */
background: #282828;
}
/* Rounded corners for the first link of the menu/submenus */
#cssmenu > ul li:first-child>a {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border-top: 0;
}
/* Rounded corners for the last link of the menu/submenus */
#cssmenu > ul li:last-child>a {
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
border-bottom: 0;
}
/* The hover state of the menu/submenu links */
#cssmenu > ul li>a:hover, #cssmenu > ul li:hover>a {
color: #fff;
text-shadow: 0 1px 0 rgba(0, 0, 0, .25);
background: #f23f37;
background: -webkit-linear-gradient(bottom, #f23f37, #f45d57);
background: -ms-linear-gradient(bottom, #f23f37, #f45d57);
background: -moz-linear-gradient(bottom, #f23f37, #f45d57);
background: -o-linear-gradient(bottom, #f23f37, #f45d57);
border-color: transparent;
}
/* The arrow indicating a submenu */
#cssmenu > ul .has-sub>a::after {
content: '';
position: absolute;
top: 16px;
right: 10px;
width: 0px;
height: 0px;
/* Creating the arrow using borders */
border: 4px solid transparent;
border-left: 4px solid #d8d8d8;
}
/* Creating the arrow using borders */
border: 4px solid transparent;
border-left: 4px solid #000;
}
/* Changing the color of the arrow on hover */
#cssmenu > ul li>a:hover::after, #cssmenu > ul li:hover>a::after {
border-left: 4px solid #fff;
}
#cssmenu > ul li>a:hover::before, #cssmenu > ul li:hover>a::before {
border-left: 4px solid rgba(0, 0, 0, .3);
}
/* THE SUBMENUS */
#cssmenu > ul ul {
position: absolute;
left: 150px;
top: -9999px;
padding-left: 5px;
opacity: 0;
/* The fade effect, created using an opacity transition */
-webkit-transition: opacity .3s ease-in;
-moz-transition: opacity .3s ease-in;
-o-transition: opacity .3s ease-in;
-ms-transition: opacity .3s ease-in;
}
/* Showing the submenu when the user is hovering the parent link */
#cssmenu > ul li:hover>ul {
top: 0px;
opacity: 1;
}
Die ausklappbaren Untermenüs sollen jedoch nur ungefähr halb so breit sein, wie das eigentliche Menü. Wie erreiche ich das? Vielen Dank!
Grüße
wetterfrosch
-
Om nah hoo pez nyeetz, wetterfrosch!
Die ausklappbaren Untermenüs sollen jedoch nur ungefähr halb so breit sein, wie das eigentliche Menü. Wie erreiche ich das? Vielen Dank!
Zeig bitte die Seite, dann kann man mit Firebug o.ä. ran und braucht nicht so viel denken bzw. kopieren.
Matthias
--
1/z ist kein Blatt Papier.
