ドロップダウンメニュー グローバルナビ

Question

<ul id="flip2" class="dropmenu ヒラギノ丸ゴProNW4 main">
    <li class="alt"><a href="../index.html" target="_top">1</a>
    </li>
    <li class="alt"><a href="../blog/top.html" target="_top">2</a>
    </li>
    <li class="alt"><a href="../alpha/alpha.html" target="_top" >3</a>
        <ul>
           <li><a href="../alpha/alpha.html" target="_top" >A</a></li>
           <li><a href="#">B</a></li>
        </ul>
    </li>
    <li><a href="../contact/contact.html" target="_top" >4</a>
        <ul>
        </ul>
    </li>
</ul>

body{
	background:rgba(0,0,0,0.0);
	margin:0;
	padding:0;
	height:43px;
}


.dropmenu{
  *zoom: 1;
  list-style-type: none;
  width:900px;
  margin: 14px auto 0px;
  padding: 0;

  overflow:visible;
}

.dropmenu li{
  position: relative;
  width: 130px;
  float: left;
  text-align: center;
}
.dropmenu li a{
  display: block;
  padding: 10px 0px;
  /* 通常時背景 */
  background: rgba(0,0,0,0.75);
  color: #fff;
  font-size: 16px;
  line-height: 1;
  text-decoration: none;
}
.dropmenu li ul{
  list-style: none;
  margin: 0;
  padding: 0;
}
.dropmenu li ul li{
  width: 100%;
}
.dropmenu li ul li a{
  padding: 3px;
  /* ドロップメニューの間の線 */
  border-top: 1px solid #fff;
  /* ダウンメニュー背景 */
  background: rgba(0,0,0,0.37); 
  font-size:14px;
}
.dropmenu li a:hover{
	/* オンマウス時背景 */
 	background: rgba(0,0,0,0.75);
	color:rgba(255,110,0,1.00);
}



#flip2 li ul {
  visibility: hidden;
  perspective: 400px;
}
#flip2 li:hover ul{
  visibility: visible;
}
#flip2 ul li{
  transform: rotateY(90deg);
  transform-origin: 50% 0;
  transition: .3s;
}
#flip2 li:hover li{
  transform: rotateY(0);
}
#flip2 ul li:nth-child(2) {
  transition-delay: .1s;
}
#flip2 ul li:nth-child(3) {
  transition-delay: .2s;
}
#flip2 ul li:nth-child(4) {
  transition-delay: .3s;
}
#flip2 ul li:nth-child(5) {
  transition-delay: .4s;
}

ナビを作りたくて、テンプレートのようなものを使いました。
ドロップダウンすると、ホバーしている要素の下に表示されるんですが、要素全体の下に表示したいです。

このように表示されます。（AとBは、マウスホバー時に表示）
それを

このように

どこをいじっていいのか全くわかりません。
また、画面全体の中心に表示したいのですが、それも上手く行きません。

Comments

[kei344]

タイトルが「 ロドップダウンメニュー」になっています。

[ryo-dev]

ありがとうございます。訂正しました。

Answer 1

動きはもとのものから調整していません。

body{
    background:rgba(0,0,0,0.0);
    margin:0;
    padding:0;
    height:43px;
}

.dropmenu::after { /* ADD */
    clear: both;
    content: "";
    display: block;
}
.dropmenu{
  *zoom: 1;
  list-style-type: none;
  /*width:900px;*/ /* DELETE */
  width: 520px; /* ADD */
  position: relative;
  margin: 14px auto 0px;
  padding: 0;

  overflow:visible;
}

.dropmenu li{
  /*position: relative;*/ /* DELETE */
  width: 130px;
  float: left;
  text-align: center;
}
.dropmenu li a{
  display: block;
  padding: 10px 0px;
  /* 通常時背景 */
  background: rgba(0,0,0,0.75);
  color: #fff;
  font-size: 16px;
  line-height: 1;
  text-decoration: none;
}
.dropmenu li ul{
  list-style: none;
  margin: 0;
  padding: 0;
}
.dropmenu li ul li{
  /*width: 100%;*/ /* DELETE */
  width: auto; /* ADD */
}
.dropmenu li ul li a{
  padding: 3px;
  /* ドロップメニューの間の線 */
  border-top: 1px solid #fff;
  /* ダウンメニュー背景 */
  background: rgba(0,0,0,0.37); 
  font-size:14px;
}
.dropmenu li a:hover{
    /* オンマウス時背景 */
     background: rgba(0,0,0,0.75);
    color:rgba(255,110,0,1.00);
}

#flip2 li ul {
  visibility: hidden;
  perspective: 400px;
    left: 0; /* ADD */
    position: absolute; /* ADD */
    top: 100%; /* ADD */
	width: 100%; /* ADD */
	background-color: gray; /* ADD */
}
#flip2 li:hover ul{
  visibility: visible;
}
#flip2 ul li{
  transform: rotateY(90deg);
  transform-origin: 50% 0;
  transition: .3s;
}
#flip2 li:hover li{
  transform: rotateY(0);
}
#flip2 ul li:nth-child(2) {
  transition-delay: .1s;
}
#flip2 ul li:nth-child(3) {
  transition-delay: .2s;
}
#flip2 ul li:nth-child(4) {
  transition-delay: .3s;
}
#flip2 ul li:nth-child(5) {
  transition-delay: .4s;
}
```**動くサンプル：**[https://jsfiddle.net/n9b4ea15/1/](https://jsfiddle.net/n9b4ea15/1/)

Comments

[ryo-dev]

どこをどうすると横になるかを解説いただけると助かります。
あと、中央になる説明もお願いします。

[kei344]

ご自身のコードと見比べながら、何が違うか考えてください。