Difference between revisions of "Template:TokyoTech/css/main"

Line 213: Line 213:
 
.w3-border-grey,.w3-hover-border-grey:hover,.w3-border-gray,.w3-hover-border-gray:hover{border-color:#bbb!important}
 
.w3-border-grey,.w3-hover-border-grey:hover,.w3-border-gray,.w3-hover-border-gray:hover{border-color:#bbb!important}
  
−
ul.pulldown_menu_3 {
+
#dropmenu {
−
list-style: none; /* 先頭記号を消す */
+
  list-style-type: none;
 +
  width: 190px;
 +
  height: 90px;
 +
  margin: 10px auto 150px;
 +
  padding: 0;
 +
  background: #00aaee;
 +
  border-bottom: 5px solid #006699;
 +
  border-right: 5px solid #006699;
 +
  border-radius: 3px 3px 0 0;
 
}
 
}
−
ul.pulldown_menu_3 li {
+
 
−
position: relative; /* 2段目の位置を指定するため */
+
#dropmenu li {
−
width: 100px; /* リスト項目の幅 */
+
  position: relative;
 +
  top:0%;
 +
  width: 100%;
 +
  margin: 0;
 +
  padding: 0;
 +
  text-align: center;
 
}
 
}
−
ul.pulldown_menu_3 ul {
+
 
−
position: absolute; /* 2段目の位置を絶対位置で指定 */
+
#dropmenu li a {
−
left: 100px; /* 1段目の幅の分を右へ */
+
  display: block;
−
top: 0px; /* 1段目の上下方向は同じ位置 */
+
  margin: 0;
−
list-style: none; /* 2段目の先頭記号を消す */
+
  padding: 9px 0 9px;
−
padding-left: 0px; /* 2段目の左位置を1段目に揃える */
+
  color: #ffffff;
 +
  font-size: 12px;
 +
  font-weight: bold;
 +
  line-height: 1;
 +
  border-top: 1px solid #ffffff;
 +
  border-right: 0px solid #ffffff;
 +
  text-decoration: none;
 
}
 
}
−
ul.pulldown_menu_3 a {
+
 
−
color: white; /* 文字色 */
+
#dropmenu li ul {
−
display: block; /* ブロックレベルに */
+
  list-style: none;
−
text-align: center; /* 文字を中央合わせに */
+
  position: absolute;
−
padding: 5px; /* 内部の余白 */
+
  width: 190px;
−
border: 1px #9999FF solid; /* 枠線 */
+
  top: 0;
−
text-decoration: none; /* 下線を消す */
+
  left: 100%;
−
outline: none; /* 選択時の点線枠線を消す */
+
  margin: 0;
−
background: url(image/gradation_green.bmp); /* 通常の背景画像 */
+
  padding: 0;
−
height: 16px; /* 高さの調整 */
+
  border-radius: 0px 0px 3px 3px;
 
}
 
}
−
ul.pulldown_menu_3 ul a {
+
 
−
background: url(image/gradation_green2.jpg); /* ２段目以降の背景画像 */
+
#dropmenu li ul li{
 +
  overflow: hidden;
 +
  width: 100%;
 +
  height: 0;
 +
  color: #ffffff;
 +
  -moz-transition: .2s;
 +
  -webkit-transition: .2s;
 +
  -o-transition: .2s;
 +
  -ms-transition: .2s;
 +
  transition: .2s;
 
}
 
}
−
ul.pulldown_menu_3 a:hover {/* マウスカーソルが乗っている状態 */
+
 
−
background: url(image/gradation_green_R.bmp); /* 通常とは違う背景画像 */
+
#dropmenu li ul li a{
−
color: blue; /* 文字色 */
+
  padding: 9px 9px;
 +
  background: #00aaee;
 +
  text-align: left;
 +
  font-size: 11px;
 +
  font-weight: normal;
 
}
 
}
−
ul.pulldown_menu_3 a:active {/* マウスがクリックされている状態 */
+
 
−
background: url(image/gradation_green_R.bmp); /* 通常とは違う背景画像 */
+
#dropmenu li:hover > a{  
−
color: red; /* 文字色 */
+
  background: #00aaee;
 +
  color: #ffff00;
 +
}
 +
 
 +
#dropmenu > li:hover > a{
 +
  border-radius: 3px 3px 0px 0px;
 +
}
 +
 
 +
#dropmenu li:hover ul li{
 +
  overflow: visible; 
 +
  height: 30px;
 +
  border-bottom: 1px dotted #00aacc;
 +
  border-left: 1px dotted #ffffff;
 +
}
 +
 
 +
#dropmenu li:hover ul li:first-child{
 +
  border-top: 0;
 +
}
 +
#dropmenu li:hover ul li:last-child{
 +
  border-bottom: 0;
 +
}
 +
 
 +
#dropmenu li:hover ul li:last-child a{
 +
  border-radius: 0 0 3px 3px;  
 
}
 
}
  

Revision as of 01:03, 30 October 2017