プルダウンメニュー

css javascript

http://www.designmeme.com/articles/csspulldownmenu/
http://blog.faro.main.jp/?eid=591449

  • cssの設定でかなりぶれる。。


css:

#menu {
  text-align: left;
}
#menu ul,
#menu li {
  list-style: none;
  margin: 0;
  padding: 0;
}
#menu ul#mainMenu li,
#menu ul#mainMenu li.pd ul,
#menu ul#mainMenu li a {
  width: 100px;
}
#menu ul#mainMenu li {
  float: left;
  border:1px solid #00175a;
}
#menu ul li.pd ul{
  margin-left:-1px;
}
/* ie5.5 */
* html #menu ul#mainMenu li.pd ul li{
  margin-left: -16px;
  voice-family:"?"}?"";
  voice-family:inherit;
  margin-left: 0px;
}
/* ie7 */
*:first-child+html #menu ul li.pd ul{
  margin-top: 30px;
  margin-left:-101px;
}

#menu ul#mainMenu li.pd ul {
  display: none;
  position: absolute;
}
#menu ul#mainMenu li.pd li {
  float: none;
  display: list-item;
}

 #menu ul#mainMenu li a {
  font-size: small;
  display: block;
  height: 30px;
  line-height:2em;
  text-align: center;
  color: #fff;
  background-color: #00175a;
  text-decoration: none;
}
#menu ul#mainMenu li a:hover {
  color: #000;
  background-color: #fff;
}
#menu ul#mainMenu li.pd a:hover {
  background-color: #009acc;
}
#menu ul#mainMenu li.pd li a:hover {
  background-color: #009acc;
}

/*  */
#menu ul#mainMenu li.pd:hover ul {
  display: block;
}


javascript:

window.onload = function(){
  initPullDownMenu();
}
function initPullDownMenu() {
if( !browser.isIE || browser.isIE7up ) return;
  var obj = document.getElementById( 'menu' );
  var obj = document.getElementById( 'mainMenu');
  for( var i = 0; i < obj.childNodes.length; i++ ) {
    if( obj.childNodes[i].className == 'pd' ) {
      obj.childNodes[i].onmouseover = function(){ pullDown( this ) };
      obj.childNodes[i].onmouseout  = function(){ pullDown( this ) };
    }
  }
}
function pullDown( obj ){
  for( var i=0; i < obj.childNodes.length; i++ ) {
    if( obj.childNodes[i].nodeName.toLowerCase() == 'ul' ) {
      obj.childNodes[i].style.display 
        = obj.childNodes[i].style.display == 'block' ? 'none' : 'block';
    }
  }
}


html:

<div id="menu">
  <ul id="mainMenu">
    <li class="home">
      <a href="/" id="mHome" title="ホームへ">ホーム
      </a></li>
    <li class="pd">
      <a href="#">menu1
      </a>
      <ul>
        <li><a href="#">menu1-1
        </a></li>
        <li><a href="#">menu1-2
        </a></li>
        <li><a href="#">menu1-3
        </a></li>
      </ul>
    </li>
    <li class="pd">
      <a href="#">menu2
      </a>
      <ul>
        <li><a href="#">menu2-1
        </a></li>
      </ul>
    </li>
    <li class="pd">
      <a href="#">menu3
      </a>
      <ul>
        <li><a href="#">menu3-1
        </a></li>
        <li><a href="#">menu3-2
        </a></li>
        <li><a href="#">menu3-3
        </a></li>
        <li><a href="#">menu3-4
        </a></li>
      </ul>
    </li>
  </ul>
</div>

確認

  • mac Safari2.0.4
  • mac Firefox2.0.0.3
  • mac Opera9.20
  • mac IE5.2.3
  • win Firefox2.0.0.3
  • win IE7.0
  • win IE6.0
  • win IE5.5
  • win IE5.01（微妙）
  • win Opera9.00