「メニュー」タグアーカイブ

WordPress BuddyPressカスタマイズメモ 管理画面のサブメニューの非表示。管理者以外

管理者以外は、プラグイン、ユーザーなどのサブメニューを非表示にする

WordPressのSNSプラグイン、BuddyPressを導入すると不特定多数のメンバーが参加することになる。

管理者以外の、編集者や投稿者には、非表示にしておきたいメニューがある。

管理画面の一部のメニューを非表示にするで、メニューごと非表示にする方法は商会した。

今回はサブメニューだけを非表示にする方法。

functions.php へ記述

//管理画面のサブメニューの非表示(管理者以外)

if (!current_user_can('administrator')) {
function remove_submenus() {
// remove_submenu_page('index.php', 'index.php'); // ダッシュボード -> ホーム
// remove_submenu_page('index.php', 'update-core.php'); // ダッシュボード -> 更新
// remove_submenu_page('edit.php', 'edit.php'); // 投稿 -> 投稿一覧
// remove_submenu_page('edit.php', 'post-new.php'); // 投稿 -> 新規追加
// remove_submenu_page('edit.php', 'edit-tags.php?taxonomy=category'); // 投稿 -> カテゴリ
// remove_submenu_page('edit.php', 'edit-tags.php?taxonomy=post_tag'); // 投稿 -> タグ
// remove_submenu_page('upload.php', 'upload.php'); // メディア -> ライブラリ
// remove_submenu_page('upload.php', 'media-new.php'); // メディア -> 新規追加
// remove_submenu_page('link-manager.php', 'link-manager.php'); // リンク -> すべてのリンク
// remove_submenu_page('link-manager.php', 'link-add.php'); // リンク -> 新規追加
// remove_submenu_page('link-manager.php', 'edit-tags.php?taxonomy=link_category'); // リンク -> リンクカテゴリー
// remove_submenu_page('edit.php?post_type=page', 'edit.php?post_type=page'); // 固定ページ -> 固定ページ一覧
// remove_submenu_page('edit.php?post_type=page', 'post-new.php?post_type=page'); // 固定ページ -> 新規追加
// remove_submenu_page('themes.php', 'themes.php'); // 外観 -> テーマ
// remove_submenu_page('themes.php', 'widgets.php'); // 外観 -> ウィジェット
// remove_submenu_page('themes.php', 'theme-editor.php'); // 外観 -> テーマ編集
// remove_submenu_page('plugins.php', 'plugins.php'); // プラグイン -> インストール済みプラグイン
// remove_submenu_page('plugins.php', 'plugin-install.php'); // プラグイン -> 新規追加
// remove_submenu_page('plugins.php', 'plugin-editor.php'); // プラグイン -> プラグイン編集
// remove_submenu_page('users.php', 'users.php'); // ユーザー -> ユーザー一覧
// remove_submenu_page('users.php', 'user-new.php'); // ユーザー -> 新規追加
// remove_submenu_page('users.php', 'profile.php'); // ユーザー -> プロフィール
// remove_submenu_page('tools.php', 'tools.php'); // ツール -> 利用可能なツール
// remove_submenu_page('tools.php', 'import.php'); // ツール -> インポート
// remove_submenu_page('tools.php', 'export.php'); // ツール -> エクスポート
// remove_submenu_page('options-general.php', 'options-general.php'); // 設定 -> 一般
// remove_submenu_page('options-general.php', 'options-writing.php'); // 設定 -> 投稿設定
// remove_submenu_page('options-general.php', 'options-reading.php'); // 設定 -> 表示設定
// remove_submenu_page('options-general.php', 'options-discussion.php'); // 設定 -> ディスカッション
// remove_submenu_page('options-general.php', 'options-media.php'); // 設定 -> メディア
// remove_submenu_page('options-general.php', 'options-privacy.php'); // 設定 -> プライバシー
// remove_submenu_page('options-general.php', 'options-permalink.php'); // 設定 -> パーマリンク設定
}
add_action('admin_menu', 'remove_submenus', 102);
}

「//」を頭につけると、コメントアウトなので、メニューからは削除されない。

上の例でいくと、「ユーザー一覧」を非表示にしたいなら、

// remove_submenu_page('users.php', 'users.php'); // ユーザー -> ユーザー一覧

  ↓

 remove_submenu_page('users.php', 'users.php'); // ユーザー -> ユーザー一覧

と、頭の//を削除すればいい。

管理者でメニューを削除したくない場合は、一番上と一番下の

if (!current_user_can('administrator')) {

}

を削除すればいい。

 

メニューを非表示にしている場合は、サブメニューも強制非表示

例えば、メニューの「ユーザー」を

remove_menu_page('users.php');

で非表示にしている場合は、

remove_submenu_page('users.php', 'users.php');
remove_submenu_page('users.php', 'user-new.php');
remove_submenu_page('users.php', 'profile.php');

と書いていなくても、

「ユーザー」のサブメニューである
ユーザー -> ユーザー一覧
ユーザー -> 新規追加
ユーザー -> プロフィール

の3個は強制的に非表示になる。

この記事も読まれています

WordPress BuddyPressカスタマイズメモ 管理画面の一部のメニューを非表示にする。管理者以外

管理者以外は、プラグイン、ユーザーなどのメニューを非表示にする

WordPressのSNSプラグイン、BuddyPressを導入すると不特定多数のメンバーが参加することになる。

管理者以外の、編集者や投稿者には、非表示にしておきたいメニューがある。

ついでに、プラグインで追加されるメニューも、非表示にしたい。

functions.php へ記述

//管理画面の左のメニュー非表示

if (!current_user_can('administrator')) {
function remove_menus() {
  remove_menu_page('index.php'); // ダッシュボード
  remove_menu_page('separator1'); // セパレータ1
// remove_menu_page('edit.php'); // 投稿
// remove_menu_page('upload.php'); // メディア
  remove_menu_page('link-manager.php'); // リンク
// remove_menu_page('edit.php?post_type=page'); // 固定ページ
// remove_menu_page('edit-comments.php'); // コメント
  remove_menu_page('separator2'); // セパレータ2
  remove_menu_page('themes.php'); // 外観
  remove_menu_page('plugins.php'); // プラグイン
// remove_menu_page('users.php'); // ユーザー
  remove_menu_page('tools.php'); // ツール
  remove_menu_page('wpcf7');//plug-in contact form7
// remove_menu_page('options-general.php'); // 設定
// remove_menu_page('profile.php'); // プロフィール(管理者以外のユーザー用)
}
add_action('admin_menu', 'remove_menus');
}

「//」を頭につけると、コメントアウトなので、メニューからは削除されない。

上の例でいくと、例えば、「ユーザー」も非表示にしたいなら、

// remove_menu_page('users.php'); // ユーザー

  ↓

 remove_menu_page('users.php'); // ユーザー

と、頭の//を削除すればいい。

 

プラグインで追加されたメニューを非表示にする方法

プラグインで追加されたメニューを削除するための引数(例えば、wpcf7 みたいな)を確認したいのであれば、

管理バーに追加されたメニューの場合は

global $wp_admin_bar;

の直後に

var_dump( $wp_admin_bar );

と記入したら見えるので、確認できる。

サイドに追加されたメニューの場合は

global $submenu;

の直後に

var_dump( $submenu );

でOK。

引数が分かれば、

remove_menu_page('調べた引数');

で非表示にできる。

WordPress BuddyPressカスタマイズメモ 返信メール、メニュー、管理画面、投稿画面など (SANGOテンプレート)

BuddyPressのカスタマイズメモ

基本設定と運用の前提

・BuddyPressでユーザー登録(投稿者として)してもらい、みんなで記事を投稿してもらう

・ユーザー同士は顔見知りじゃないので、それぞれの記事は、管理画面では見えないように

・ユーザー(投稿者権限)の管理画面でのメニューを一部非表示に

・ユーザーの投稿画面で表示オプションを非表示に

・Buddypressのmemberページを使わずに、SangoのAuthorページを活用

・アップデートの通知などをユーザーに見えないように

・コメント時のメール通知などの最適化

・アップデート時に問題が起こらないように、子テーマ化して、コアファイルは極力触らず、functions.phpを使う
 

BuddyPressで実現したカスタマイズ一覧

サイトフロント(ログインせずに見えるWebサイト全て)

・サイドバーにオリジナルWidget、ユーザーごとの記事PVランキング「人気のメンバー」を追加

・サイトフロントのアドミンバー非表示

・ログイン直後に管理画面ではなくサイトフロントへ飛ばす

・サイトフロントのコメントの編集ボタンを削除

 

管理画面全体

・管理画面の一部メニュー非表示

・管理画面のサブメニューの非表示

・管理画面のメニューのアドミンバーの、BuddyPress通知の吹き出しを削除

・管理画面のアドミンバーの通知を消す

・管理画面のアドミンバー内のメニューを非表示

・Wordpressやプラグインのアップデート通知を非表示

・「投稿」→「記事」、「コメント」→「あなたの記事へのコメント」へ、メニューの文言変更

・ダッシュボード画面の「アクティビティ」「クイックドラフト」などを非表示

・管理画面用のCSSファイルを、子テーマ化する

・ログイン時のみCSSを適用させる

・ログイン画面の「W」のロゴを画像に変える

・管理画面のプロフィール項目でいらない部分を消す

 

投稿画面、投稿権限

・記事投稿でタイトルの入力を必須にする

・投稿者の投稿は、自分の投稿のみ表示させる(他ユーザーの投稿は管理画面の記事一覧では見えない)

・自分のもののみの投稿数を取得して、記事数に代入

・upした画像は投稿者本人しか見えないようにする

・投稿画面の不要なオプションを削除

・cssで投稿画面の不要なオプションを非表示に

 

コメント関連

・「あなたのコメント」をメニューに追加

・「あなたのコメント」に投稿者自身が、人の記事に書いたコメントを表示

・「あなたのコメント」の上のコメントメニュー削除

・「あなたのコメント」「あなたの記事へのコメント」の編集権の調整

・「あなたのコメント」に編集権限を与え、「あなたのコメント」に「削除する」だけ残す

・「コメント」に、「あなたの記事へのコメント」のみを表示させる

・コメント数を「あなたの記事へのコメント数」のみカウントする

・「あなたの記事へのコメント」で上のコメントメニュー削除

 

BuddyPressのメンバー機能

・メンバーなどWidget/ウィジェットのURLをリダイレクトさせる

・WidgetのURLの文字列を、別の文字列に置換する

・メンバー登録時の、ユーザー名で禁止文字列を設定する

・メンバーのタイトルの名前に「さん」を追加

・文言変更「登録」→「新規登録」に

 

Sangoのカスタマイズ・バグ修正

・sango のビジュアルエディターのバグ修正(スマホでTinyMCEの文字修飾がおかしい)

・新たなプルダウン(フォントサイズ)追加

・管理画面のプロフィールで、sangoによる追加項目を一旦削除

・管理画面のプロフィールで、Sangoの「肩書」の部分を「出身地」などに変更

 

通知メールのカスタマイズ

・コメント通知メールの差出人(wordpress@yourdomain.com)を変更

・トラックバック、ピンバック、コメントの通知メール内容を変更

 

プラグインのカスタマイズ(子テーマ及びfunctions.phpで)

・Better Notifications for WordPressの設定の問題点を修正するため、管理画面で特定のページの時のみ、jsを上書きする

スクロールしたら途中から出てきて、スクロール戻すと消えるメニューを作る方法

画面をスクロールしたらふわっと出てくるメニューを作る

 

スクロールしたら途中フワッと浮き出るメニューのデモページ
はこちら。

メニューと書いたが、メニューだけでなく、単純に画像を浮かび上がらせたりページの下までスクロールした時に「ページトップへ戻る」のリンクを出したりもできる。

 
 

用意するもの

sudden.js
sudden.css

sudden.js の中身

$(function() {
var navBox = $(“#menu”);
navBox.hide();
var TargetPos = 100;
$(window).scroll( function() {
var ScrollPos = $(window).scrollTop();
if( ScrollPos > TargetPos ) {
navBox.fadeIn();
}
else {
navBox.fadeOut();
}
});
});

 

sudden.css の中身

#menu {
z-index: 1000000;
width: 100%;
position: fixed;
display: none; /*最初は非表示に設定*/
top: 20px;
right: 0;
filter:alpha(opacity=60);
-moz-opacity: 0.6;
opacity: 0.6;
}

絶対に必要なのが display:none; これで非表示にしておく必要がある。

それ以外は、場所や透過度、重なり順の設定などなので変更可。

 
 

HTMLの<head>と</head>の間で読み込む

<link rel=”stylesheet” type=”text/css” href=”css/sudden.css” /><!– menu途中で出てくる –>
<script type=”text/javascript” src=”https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js”></script><!– menu途中で出てくる –>
<script type=”text/javascript” src=”js/sudden.js”></script><!– menu途中で出てくる –>

先ほどの、sudden.csssudden.jsjqueryを読み込む。

順番に注意。
 
 

フワッと表示させるHTMLのメニューの部分

<div id=”menu”>
<p><img src=”img/menu.png” /></p>
<!– メニューの中身ここの<div>と</div>の間に書く –>
</div>

画像は準備すること。

div=”menu” の間の部分が全て最初見えず、スクロールでふわっと表示される。
<p><img src=”img/menu.png” /></p>
<!– メニューの中身ここの<div>と</div>の間に書く –>

この部分は任意の内容に変更可能。

 
 

CSS、JSファイル、画像などのセットをまとめてダウンロードするのはこちら。

sudden.zip

 
スクロールしたら途中フワッと浮き出るメニューのデモページ
はこちら。

メニュー画像オンマウスで、2段目が横並びになるメニューの作り方

CSS1個とjsファイル2個で作る簡単2段メニュー

 

2段メニューデモページ

 

色々な応用ができるが、今回は、1段目のメニューは画像、1段目にオンマウスで2段目がニョロリと表れて、文字でリンクが入れれるような形。

 
 

必要なもの

まとめてダウンロードしよう → accordionmenu.zip からダウンロード。

中身:

accordion.css ← 背景色や1段目のメニューの横幅を変える時に編集する
accordion.js
jquery.min.js
・index.html ← 必要ソースは後述
・メニュー画像数個

 

上記個別ファイルは、ファイル名を変えて .txt にしているので、こちらから右クリックでダウンロード保存した場合などは、ファイル名や拡張子を .js.css なども含めて上記の状態に戻すこと。

 
 

HTMLソースコード

 
まずは <head> ….. </head> の間で CSS と js ファイルを読み込む。

<link rel=”stylesheet” type=”text/css” href=”css/accordion.css” /><!– accordionmenu –>
<script type=”text/javascript” src=”js/jquery.min.js” ></script><!– accordionmenu –>
<script type=”text/javascript” src=”js/accordion.js”></script><!– accordionmenu –>

 
 

メニューを作りたい場所で、HTMLソースを書く。
2段メニューの文字やリンク先はここに記述。

メニュー画像の横幅や背景色を変えたい時は、 accordion.css を編集。

<div id=”gnav”>
<ul>
<li><a href=”index.html” class=”n01″><span>ホーム</span></a>
<div class=”gnavList”>
<ul>
<li><a href=”リンク先1.html”>2段メニュー1</a></li>
<li><a href=”リンク先2.html”>2段メニュー2</a></li>
</ul>
</div><!– gnavList –>
</li><!– ホーム –>
~~~~~~
以下同じ形でメニューが続いて
~~~~~~
</ul>
</div><!– gnav end –>

 
 

accordion.js、jquery.min.js、accordion.cssの3つと、メニュー画像、HTMLをサーバーにアップロード

FTPソフトを使って、ホームページ上にアップロードする。

 index.html
 jsフォルダ
  accordion.js
  jquery.min.js
 cssフォルダ
  accordion.css
 imgフォルダ
  メニュー画像など

パーミッションなどは関係ないので、644などでOK。

 

2段メニューデモページ

 

Twenty Twelveのスマホメニューが開かない場合の対処法

WordPressのスマホレイアウトでメニューボタンが動かない!

ある特定の条件下で、Wordpressのテーマ、Twentytwelveのスマホ用メニューが開かない場合がある。
twentytwelve-menu1
この修正方法を紹介。
 

 

条件1 Twentytwelveを使っている。

WordPressのテーマ(テンプレート)にtwentytwelveを使っている時にこれは発生する。TwentyelevenやTwenty thirteen fourteen fifteen…などでは起こらない(今後ずっとおこらないかどうかは不明)

条件2 子テーマを使用していて、header.phpをカスタマイズしている

親テーマのheader.phpがアップデートで変更になった。具体的には端末判定によるスマホ対応ではなく、レスポンシブデザインによるスマホ対応になった。

レスポンシブってなに?って場合はこちらのレスポンシブデザインでtableタグを制御をチェック。

この2つの条件が当てはまる場合に、Twentytwelveのスマホメニューが動かなくなる。
 

 

解決法 子テーマのheader.phpを修正

 
Wordpressの管理画面にログインし「外観」→「テーマ編集」

右上の「編集するテーマを選択:」の箇所がTwentytwelveの子テーマになっている事を確認して、「header.php」を編集する。

メニューの部分が

<nav id=”site-navigation” class=”main-navigation” role=”navigation”>
<h3 class=”menu-toggle”><?php _e( ‘Menu’, ‘twentytwelve’ ); ?></h3>
<a class=”assistive-text” href=”#content” title=”<?php esc_attr_e( ‘Skip to content’, ‘twentytwelve’ ); ?>”><?php _e( ‘Skip to content’, ‘twentytwelve’ ); ?></a>
<?php wp_nav_menu( array( ‘theme_location’ => ‘primary’, ‘menu_class’ => ‘nav-menu’ ) ); ?>
</nav><!– #site-navigation –>

となっている箇所があるはずなので、その中の

<h3 class=”menu-toggle”><?php _e( ‘Menu’, ‘twentytwelve’ ); ?></h3>

を、↓↓↓ に変更するだけ。

<button class=”menu-toggle”><?php _e( ‘Menu’, ‘twentytwelve’ ); ?></button>

これでメニューが動くようになったはずだ。

なお、カスタマイズは自己責任で。心配ならバックアップを取っておこう。

「三」みたいなスマホ用jQueryメニューをホームページに導入する方法

スマホで「三」をタップ(クリック)すると、メニューがニュル~っと出てくるやつ

 

正式名称は、ハンバーガーメニューと言うらしいが、あまりこの呼称は浸透していない。

もちろんスマホもPCも対応。

とにかく、これを導入してみよう。

導入イメージはこんな感じ↓

humbergermenu1

humbergermenu2

 

デモページはこちら(デモページ右上にMENUがある。)

 

 

jQueryなどのメニューに必要なものを揃える

右クリックで「対象を保存」などでダウンロード可能。
jquery.min.js
jquery-ui.min.js
menu3.js
index.html
menu3.css
・「」と「X」の画像

これが最低限必要。
 

ちなみに、上記リンク先は全てテキストにしているので、ダウンロードして使う場合は、拡張子の.txtをそれぞれ、「.js」「.css」「.html」などに変更しておくこと。

 

3menu.zip
↑index.html、menu3.css、menu3.js、jquery.min.js、jquery-ui.min.js、MENUとXの画像2個を全てまとめて圧縮したもの(フォルダ階層あり)はこちら。
 
 

サーバー上に設置

cssフォルダ/menu3.css

imgフォルダ/menu.pngmenu2.png

jsフォルダ/jquery.min.jsmenu3.jsjquery-ui.min.js

index.html

と言う感じで設置する。
 
パーミッション等は変更必要ないので、そのままアップロードする。

 

 

メニューや色などの変更

・メニューの中身は index.html の中の menu1 menu2 menu3 などと書いている部分を修正。
URLも同様。

なお、同じように menu5 menu6 を追加すれば、メニューは自動的に増える。
 

・色は menu3.css
.menu3 {
z-index: 1000000;
font-weight: bold;
font-size: 0.8em;
width: 100%;
background: #FFCC00;
position: fixed;
top: 20px;
right: 0;
text-align: center;
}
この辺りを修正。

画像等も適当に入れ替え可能。
 

 
 

ハンバーガーメニューの簡単な解説

HTMLファイル

↓下記コードの2行目の button の img/menu.png の部分を MENU などのテキストにする事も可能。
その場合はCSSでサイズなどを調整する必用がある。

※サンプルの menu.png は iOSのRetinaディスプレイ対応のため、画像サイズが陪になっている。

<div><!– humberger menu–>
<button class=”hamburger”><img src=”img/menu.png” width=”51px” height=”45px” /></button>
<button class=”cross”><img src=”img/menu2.png” /></button>
</div>
<div class=”menu3″>
<ul>
<a href=”index.html”><li>menu1</li></a>
<a href=”2.html”><li>menu2</li></a>
<a href=”3.html”><li>menu3</li></a>
<a href=”4.html”><li>menu4</li></a>
</ul>
</div>
<script src=’https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js’></script>
<script src=”js/menu3.js”></script>
 
 
 
menu3.js

スタイルシートなどに記述するクラス名などを変更したい場合はこちらを編集。

$(“.cross”).hide();
$(“.menu3”).hide();
$(“.hamburger”).click(function() {
$(“.menu3”).slideToggle(“slow”, function() {
$(“.hamburger”).hide();
$(“.cross”).show();
});
});

$(“.cross”).click(function() {
$(“.menu3”).slideToggle(“slow”, function() {
$(“.cross”).hide();
$(“.hamburger”).show();
});
});

 

CSSで、子も孫も横並びのドロップダウンメニュー

ドロップダウンメニューというか、プルダウンメニューというか…
下層の表示が縦並びになっているものしかない。
jQueryを使うものだとあるのだが、あえてCSSのみでやりたい時のために作ってみた。
———————————————————
ソース

<div id=”menu”><!– menu start –>
<ul id=”pulldown-menu”>
<li><a href=”index.html”><span>Home</span></a></li>
<li><a href=”#” class=”drop”><span>会社紹介</span></a>
<ul class=”about”>
<li><a href=”ceo.html”>CEO挨拶</a></li>
<li><a href=”partner.html”>パートナーシップ</a></li>
<li><a href=”map.html”>アクセス地図</a></li>
</ul>
</li>
<li><a href=”#” class=”drop”><span>事業紹介</span></a>
<ul class=”business”>
<li><a href=”area.html”>事業領域</a></li>
<li><a href=”smartgrid.html”>スマートグリッド</a></li>
<li><a href=”ess.html”>電力貯蔵装置</a></li>
</ul>
</li>
<li><a href=”#” class=”drop”><span>製品紹介</span></a>
<ul class=”product”>
<li><a href=”#” class=”drop”>新再生エネルギー</a>
<ul class=”nre”>
<li><a href=”sun.html”>太陽電池モジュール</a></li>
</ul></li>
<li><a href=”led.html”>LED</a></li>
</ul>
</li>
<li><a href=”#” class=”drop”><span>プロジェクト</span></a>
<ul class=”project”>
<li><a href=”#” class=”drop”>国内</a>
<ul class=”domestic”>
<li><a href=”island.html”>カパ島</a></li>
</ul>
</li>
<li><a href=”#” class=”drop”>海外</a>
<ul class=”oversea”>
<li><a href=”aus.html”>オーストラリア</a></li>
<li><a href=”thai.html”>タイ</a></li>
</ul>
</li>
</ul>
</li>
<li><a href=”contact.html”><span>お問い合わせ</span></a></li>
</ul>

</div><!– menu end –>

———————————————————————-
CSS
* {
margin: 0;
padding: 0;
list-style: none;
}
ul#pulldown-menu a {
color: #FFFFFF;
text-decoration: none;
}
ul#pulldown-menu a:link,
ul#pulldown-menu a:visited {
background: #3366FF;
}
ul#pulldown-menu a:hover,
ul#pulldown-menu a:active {
background: #3b91ff;
}

ul#pulldown-menu a.drop:link,
ul#pulldown-menu a.drop:visited {
background: #3366FF url(‘http://2since2006.up.seesaa.net/image/down.gif’) no-repeat;
}

ul#pulldown-menu a.drop:hover,
ul#pulldown-menu a.drop:active {
background: #3b91ff url(‘http://2since2006.up.seesaa.net/image/down.gif’) no-repeat;
}

ul#pulldown-menu li {
float: left;
position: relative;
width: 9em;
height: 2em;
line-height: 2em;
font-size: 11px;
}
ul#pulldown-menu li a.drop {
display: block;
width: 9em;
height: 2em;
text-align: center;
}
ul#pulldown-menu li a {
display: block;
width: 9em;
height: 2em;
text-align: center;
}
ul#pulldown-menu li ul li {
float: left;
position: relative;
width: 9em;
height: 2em;
line-height: 2em;
font-size: 11px;
}
ul#pulldown-menu li ul li a {
width: 9em;
height: 2em;
text-align: center;
}

ul#pulldown-menu li ul,
ul#pulldown-menu li ul li ul {
display: none;
}
ul#pulldown-menu li:hover ul {
clear: both;
width: 54em;
display: block;
position: absolute;
top: 2em;
left: 0;
z-index: 100;
}
ul#pulldown-menu li:hover ul li {
float: left;
}
* html ul#pulldown-menu li:hover ul {
vertical-align: bottom;
}

ul#pulldown-menu li:hover ul li ul {
display: none;
}

ul#pulldown-menu li ul li:hover ul {
clear: both;
float:left;
display: block;
position: absolute;
top: 0;
z-index: 200;
}

ul.about {
width: 27em;
margin-left: -9em;
}
ul.business {
width: 27em;
margin-left: -9em;
}
ul.product {
width: 18em;
}
ul.nre {
width: 9em;
margin-top: 2em;
}
ul.project {
width: 18em;
}
ul.domestic {
width: 9em;
margin-top: 2em;
}
ul.oversea {
width: 18em;
margin-top: 2em;
}

————————————————

そもそも、下層が縦にしかならない原因は、親の ul li 部分の横幅の間にしか、子や孫の ul li がこれない事。
したがって、子や孫の横幅を指定してやればこの問題は解決する。
が、下層メニューの数はそれぞれ固有なので、仕方なく個別に指定するしかなかった。したがって、汎用性は全くない。

あくまで参考程度にしかならないが、、結構困っている人がいたみたいなので、一応のTipsとして。