Dropdownmenu wagrecht oder senkrecht

[magifix]

Dropdownmenu waagrecht oder senkrecht

Hallo,

ich habe ein gestaffeltes Dropdownmenu (siehe Code)
ich möchte dass die Jahreszahlen nicht untereinander sondern nebeneinander erscheinen
die zum Jahr gehörigen Untermenus sollen dann nach unten aufgehen

kann mir jemand bitte sagen was ich da ändern muss?

<style type="text/css">

.sidebarmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
font: bold 13px Verdana;
width: 180px; /* Main Menu Item widths */
border-bottom: 1px solid #ccc;
}
 
.sidebarmenu ul li{
position: relative;
}

/* Top level menu links style */
.sidebarmenu ul li a{
display: block;
overflow: auto; /*force hasLayout in IE7 */
color: white;
text-decoration: none;
padding: 6px;
border-bottom: 1px solid #778;
border-right: 1px solid #778;
}

.sidebarmenu ul li a:link, .sidebarmenu ul li a:visited, .sidebarmenu ul li a:active{
background-color: #012D58; /*background of tabs (default state)*/
}

.sidebarmenu ul li a:visited{
color: white;
}

.sidebarmenu ul li a:hover{
background-color: black;
}

/*Sub level menu items */
.sidebarmenu ul li ul{
position: absolute;
width: 170px; /*Sub Menu Items width */
top: 0;
visibility: hidden;
}

.sidebarmenu a.subfolderstyle{
background: url(right.gif) no-repeat 97% 50%;
}

 
/* Holly Hack for IE \*/
* html .sidebarmenu ul li { float: left; height: 1%; }
* html .sidebarmenu ul li a { height: 1%; }
/* End */

</style>

<script type="text/javascript">

//Nested Side Bar Menu (Mar 20th, 09)
//By Dynamic Drive: http://www.dynamicdrive.com/style/

var menuids=["sidebarmenu1"] //Enter id(s) of each Side Bar Menu's main UL, separated by commas

function initsidebarmenu(){
for (var i=0; i<menuids.length; i++){
  var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
    for (var t=0; t<ultags.length; t++){
    ultags[t].parentNode.getElementsByTagName("a")[0].className+=" subfolderstyle"
  if (ultags[t].parentNode.parentNode.id==menuids[i]) //if this is a first level submenu
   ultags[t].style.left=ultags[t].parentNode.offsetWidth+"px" //dynamically position first level submenus to be width of main menu item
  else //else if this is a sub level submenu (ul)
    ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it
    ultags[t].parentNode.onmouseover=function(){
    this.getElementsByTagName("ul")[0].style.display="block"
    }
    ultags[t].parentNode.onmouseout=function(){
    this.getElementsByTagName("ul")[0].style.display="none"
    }
    }
  for (var t=ultags.length-1; t>-1; t--){ //loop through all sub menus again, and use "display:none" to hide menus (to prevent possible page scrollbars
  ultags[t].style.visibility="visible"
  ultags[t].style.display="none"
  }
  }
}

if (window.addEventListener)
window.addEventListener("load", initsidebarmenu, false)
else if (window.attachEvent)
window.attachEvent("onload", initsidebarmenu)

</script>

<div class="sidebarmenu">
<ul id="sidebarmenu1">
<li><a href="#">Button 1</a></li>

<li><a href="#">Button 2</a>
  <ul>
  <li><a href="#">Jahr 1</a>
         <ul>
    <li><a href="#">Januar 10</a></li>
    <li><a href="#">Februar 10</a></li>
    <li><a href="#">Silber</a></li>
    <li><a href="gold.htm">Gold</a></li>
    </ul>
  </li>
  <li><a href="#">Jahr 2</a>
        <ul>
    <li><a href="#">Januar 10</a></li>
    <li><a href="#">Februar 10</a></li>
    <li><a href="#">Silber</a></li>
    <li><a href="gold.htm">Gold</a></li>
    </ul>
  </li>
  <li><a href="#">Jahr 3</a>
      <ul>
    <li><a href="#">Januar</a></li>
    <li><a href="#">Februar</a></li>
    <li><a href="#">März</a></li>
    <li><a href="#">April</a></li>
    </ul>
  </li>
  </ul>
</li>
<li><a href="#">Button 3</a></li>
<li><a href="#">Button 4</a></li>
<li><a href="#">Button 5</a></li>
<li><a href="#">Button 6</a></li>
</ul>
</div>

 

[mermshaus]

Na ja, du müsstest die entsprechende Logik einprogrammieren, dass pro ul-Element meinetwegen mit einer Marker-CSS-Klasse angegeben werden kann, ob sich die li-Elemente horizontal oder vertikal ausrichten.

Dann müsstest du bei der mouseover-Funktion einprogrammieren, dass sich Kindelemente an diese Ausrichtung anpassen und sich teilweise „rechts“ öffnen und teilweise „unten“.

 

[magifix]

und wie bestimme ich ob die li Elemente waagrecht oder senkrecht liegen?
hab ja schon Display: inline versucht
das war es aber nicht.

 

[Wustersoss]

Wenn du mit CSS sicherer bist, dann mach doch gleich alles mit CSS und HTML ohne Javascript, so schwer ist das nicht.

Dazu findest du reichlich Tutorials im Netz. Wenn du dann an einer bestimmten Stelle dann noch hängst, kannst du ja noch mal nachfragen.

Deine Suchphrase ist "dropdown menü mit css".