Frage stellen
Ich habe eine Frage zur Änderung eines vertikalen Menüs, dass ich gern horizontal ausgerichtet haben möchte.
Kleine Frage, riesen Quelltext:
- Code: Alles auswählen
<html>
<head>
<title>css menue</title>
<style type="text/css">
<!--
body {
font-size: .8em;
}
/* The wrapper determines the width of the menu elements */
#menuwrapper {
width: 250px;
}
/* Unless you know what you do, do not touch this */
#primary-nav, #primary-nav ul {
list-style: none;
margin: 0;
padding: 0;
width: 100%;
margin-left:0; /* Bei menu mit Rahmen auf -1px einstellen */
z-index:250; /* Für GoogleMaps */
}
#primary-nav ul {
position: absolute;
top: 0;
left: 100%;
display: none;
}
#primary-nav li {
margin-bottom: -1px;
position: relative;
}
/* Styling the basic apperance of the menu elements !!!!! */
#primary-nav a {
border:1px solid #FFFFFF; /* #212C32 */
border-left:0 solid #212C32; /* #212C32 */
border-right:0 solid #212C32; /* #212C32 */
display: block;
margin: 0;
padding: 9px 0 10px 20px;
color: #FFFFFF; /* #666666 Fontfarbe im Menü! */
text-decoration: none;
background: transparent;
min-height:1em; /* Fixes IE7 whitespace bug*/
}
#primary-nav li, #primary-nav li.menuparent {
background-color: #008855; /* Menü Hintergrund*/
min-height:1em; /* Fixes IE7 bug*/
}
/* Styling the basic apperance of the active page elements (shows what page in the menu is being displayed) !!!!! */
#primary-nav li.menuactive {
background-color: #00BB75; /* Menü Hintergrund - aktiv*/
}
/* Styling the apperance of menu items on hover !!!!! */
#primary-nav li:hover,
#primary-nav li.menuh,
#primary-nav li.menuparenth,
#primary-nav li.menuactiveh {
background-color: #00BB75; /* Menü Hintergrund - hover*/
}
/* Styling the basic apperance of the menuparents - here styled the same on hover (fixes IE bug) */
#primary-nav li.menuparent,
#primary-nav li.menuparent:hover,
#primary-nav li.menuparenth {
background-image: url(../images/etc/pfeil.gif);
background-position: center right;
background-repeat: no-repeat;
}
/* The magic - set to work for up to a 3 level menu, but can be increased unlimited */
#primary-nav ul,
#primary-nav li:hover ul,
#primary-nav li:hover ul ul,
#primary-nav li.menuparenth ul,
#primary-nav li.menuparenth ul ul {
display: none;
}
#primary-nav li:hover ul,
#primary-nav ul li:hover ul,
#primary-nav ul ul li:hover ul,
#primary-nav li.menuparenth ul,
#primary-nav ul li.menuparenth ul,
#primary-nav ul ul li.menuparenth ul {
display: block;
}
/* IE Hack, will cause the css to not validate */
#primary-nav li, #primary-nav li.menuparenth { _float: left; _height: 1%; }
#primary-nav li a { _height: 1%; }
/* section header */
#primary-nav li.sectionheader {
border-left: 1px solid #FFF; /* #212C32 */
border-top: 1px solid #FFF; /* #212C32 */
font-size: 130%;
font-weight: bold;
/*padding: 1.5em 0 0.8em 0.5em;*/
padding: 6px 0 6px 15px;
background-color: #FFF;
margin: 0;
width: 100%;
}
/* separator */
#primary-nav li hr.separator {
display:block;
height: 0;
color: #ABB0B6;
background-color:#D8DCE1;
width: 100%;
border:0;
margin:0;
padding:0;
border-top: 1px solid #FFF; /* #212C32 */
border-right: 1px solid #FFF; /* #212C32 */
}
-->
</style>
</head>
<body>
<div id="menuwrapper">
<ul id="primary-nav">
<li class="menuactive">
<a class="menuactive" href="index.php"><span>eins</span></a>
</li>
<li class="menuparent">
<a class="menuparent" ><span class="sectionheader">zwei</span></a>
<ul class="unli">
<li>
<a href="index.php?page=zwei_eins"><span>zwei_eins</span></a>
</li>
<li>
<a href="index.php?page=zwei_zwei"><span>zwei_zwei</span></a>
</li>
<li>
<a href="index.php?page=zwei_drei"><span>zwei_drei</span></a>
</li>
</ul>
</li>
<li>
<a href="index.php?page=drei"><span>drei</span></a>
</li>
<li>
<a href="index.php?page=drei"><span>vier</span></a>
</li>
<li>
<a href="index.php?page=fuenf"><span>fünf</span></a>
</li>
</ul>
<div style="clear: both;"></div>
</div>
</body>
</html>
Da das Menü plus Seite noch im Aufbau ist, kann ich keinen Link posten, sorry!
Ich habe den Quelltext so angelegt, dass er gesamt als .html gespeichert werden kann, um die 'Arbeit' zu erleichtern.
Wie ändert man die Ausrichtung von CSS-Menüs?
Lässt sich dabei auch die Ausrichtung der Submenüs mit ändern, ich hätte gern ein horizontales Mainmenü mit vertikalem Untermenü.
Ich bin für jeden Tipp dankbar!
