1. ホーム
  2. 質問と答え
  3. あなたは私に間違いを訂正することができます

あなたは私に間違いを訂正することができます

2016-05-20 5 views
-2

私はHTMLとCSSの非常に初心者です。私がCSSのドロップダウンメニューを練習しているとき、サブメニューはインラインであり、正しく整列されていません。私がした間違いを知り、間違いを是正してください。あなたは私に間違いを訂正することができます

#menu{ list-style-type:none; margin:0; padding:0; } 
 
#menu li{ display:inline; } 
 
#menu li a{ text-decoration:none; background-color:#FFAAFF; color:Black; display:inline-block; padding: 20px 40px; } 
 
#menu li a:hover{ background-color:#AA7FFF; color:White; } 
 

 
.submenu{ display:none;position:absolute; top:66px; margin:0; padding:0; } 
 
.submenu li a{ display:inline-block; } 
 
#menu li:hover .submenu{ display:inline-block; }
<html xmlns="http://www.w3.org/1999/xhtml"> 
 
<head> 
 
    <title>Drop down menu</title> 
 
    <link href="login.css" rel="stylesheet" type="text/css" /> 
 
</head> 
 
<body> 
 
    <ul id="menu"> 
 
     <li><a href="#">Menu 1</a> 
 
      <ul class="submenu"> 
 
       <li><a href="#">Sub menu 1.1</a></li> 
 
       <li><a href="#">Sub menu 1.2</a></li> 
 
       <li><a href="#">Sub menu 1.3</a></li> 
 
       <li><a href="#">Sub menu 1.4</a></li> 
 
      </ul> 
 
     </li> 
 
     <li><a href="#">Menu 2</a> 
 
      <ul class="submenu"> 
 
       <li><a href="#">Sub menu 2.1</a></li> 
 
       <li><a href="#">Sub menu 2.2</a></li> 
 
       <li><a href="#">Sub menu 2.3</a></li> 
 
       <li><a href="#">Sub menu 2.4</a></li> 
 
      </ul> 
 
     </li> 
 
     <li><a href="#">Menu 3</a></li> 
 
     <li><a href="#">Menu 4</a> 
 
      <ul class="submenu"> 
 
       <li><a href="#">Sub menu 3.1</a></li> 
 
       <li><a href="#">Sub menu 3.2</a></li> 
 
       <li><a href="#">Sub menu 3.3</a></li> 
 
       <li><a href="#">Sub menu 3.4</a></li> 
 
      </ul> 
 
     </li> 
 
     <li><a href="#">Menu 5</a></li> 
 
    </ul>  
 
</body> 
 
</html>

出典

2016-05-20 Sabari

+1

のための表示をチェックしなければならないあなたが、例えば見て期待していることが明確にどのような結果にすることができますサブメニューの位置、項目が水平または垂直であるべきかどうかなど。 –

+0

垂直。親メニューの下に表示する必要があります... – Sabari

答えて

0

HIは今、このCSSは{

.submenu{ top: 100%;left: 0;} 

#menu li { 
    display: inline-block; 
    position: relative; 
} 


#menu{ list-style-type:none; margin:0; padding:0; } 
 
#menu li{ display:inline; } 
 
#menu li a{ text-decoration:none; background-color:#FFAAFF; color:Black; display:inline-block; padding: 20px 40px; } 
 
#menu li a:hover{ background-color:#AA7FFF; color:White; } 
 

 
.submenu{ display:none;position:absolute; top:66px; margin:0; padding:0; } 
 
.submenu li a{ display:inline-block; } 
 
#menu li:hover .submenu{ display:inline-block; } 
 
.submenu{ top: 100%;left: 0;} 
 

 
#menu li { 
 
display: inline-block; 
 
position: relative; 
 
}
<html xmlns="http://www.w3.org/1999/xhtml"> 
 
<head> 
 
    <title>Drop down menu</title> 
 
    <link href="login.css" rel="stylesheet" type="text/css" /> 
 
</head> 
 
<body> 
 
    <ul id="menu"> 
 
     <li><a href="#">Menu 1</a> 
 
      <ul class="submenu"> 
 
       <li><a href="#">Sub menu 1.1</a></li> 
 
       <li><a href="#">Sub menu 1.2</a></li> 
 
       <li><a href="#">Sub menu 1.3</a></li> 
 
       <li><a href="#">Sub menu 1.4</a></li> 
 
      </ul> 
 
     </li> 
 
     <li><a href="#">Menu 2</a> 
 
      <ul class="submenu"> 
 
       <li><a href="#">Sub menu 2.1</a></li> 
 
       <li><a href="#">Sub menu 2.2</a></li> 
 
       <li><a href="#">Sub menu 2.3</a></li> 
 
       <li><a href="#">Sub menu 2.4</a></li> 
 
      </ul> 
 
     </li> 
 
     <li><a href="#">Menu 3</a></li> 
 
     <li><a href="#">Menu 4</a> 
 
      <ul class="submenu"> 
 
       <li><a href="#">Sub menu 3.1</a></li> 
 
       <li><a href="#">Sub menu 3.2</a></li> 
 
       <li><a href="#">Sub menu 3.3</a></li> 
 
       <li><a href="#">Sub menu 3.4</a></li> 
 
      </ul> 
 
     </li> 
 
     <li><a href="#">Menu 5</a></li> 
 
    </ul>  
 
</body> 
 
</html>

出典

2016-05-20 07:26:46

-1

メニュー李あなた.submenuと#menu liこのCSSを定義して追加表示：-webkit-inline-box;位置：相対;}

使用このCSS そして、すべてのブラウザ

出典

2016-05-20 07:42:09 Dharmesh

関連する問題

 関連する問題