linuxk-layouts
MariaDB Archives
Apache Source Code
3
4
리한 2021.03.14 11:45:27
45

2가지 종류

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      #ws_container {
        width: 940px;
        margin: 0px auto;
        padding: 20px;
        border: 1px solid #bcbcbc;
      }
      #ws_header {
        padding: 20px;
        margin-bottom: 20px;
        border: 1px solid #bcbcbc;
      }
 ul{list-style:none; margin:0px; padding:0px;}
.two{float:left;}
.two > li{float:left;}
.two ul{display:none;position:absolute;left:auto; top:auto; }
.two li:hover > ul {display:block;}
.aaa ul li a{text-decoration:none; display:block; width:90px;height: 30px;line-height: 30px;text-align:center;}
.aaa ul li {float: left;width:90px;background-color:#B5B2FF;} 
.aaa ul li:hover{background-color:#FFE08C;}   
  #ws_content {
        padding: 20px;
        margin-bottom: 20px;
        float: left;
        border: 1px solid #bcbcbc;
      }
      #ws_footer {
        clear: both;
        padding: 20px;
        border: 1px solid #bcbcbc;
      }
    </style>
  </head>
  <body>
    <div id="ws_container">
      <div id="ws_header">
        <h1>3-Column Layout</h1>
      </div>
<div class="aaa">
<ul class="two"> 
  <li><a href="#">menu1</a></li>
  <li><a href="#">menu2</a>
<ul>
   <li><a href="#">sub menu1</a></li>
   <li><a href="#">sub menu2</a></li>
   <li><a href="#">sub menu3</a></li>
</ul>
<li><a href="#">sub menu3</a></li>
  </li>
</ul>
</div>
      <div id="ws_content">
        <h2>Content</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet. Proin gravida velit dictum dui consequat malesuada. Aenean et nibh eu purus scelerisque aliquet nec non justo. Aliquam vitae aliquet ipsum. Etiam condimentum varius purus ut ultricies. Mauris id odio pretium, sollicitudin sapien eget, adipiscing risus.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet. Proin gravida velit dictum dui consequat malesuada. Aenean et nibh eu purus scelerisque aliquet nec non justo. Aliquam vitae aliquet ipsum. Etiam condimentum varius purus ut ultricies. Mauris id odio pretium, sollicitudin sapien eget, adipiscing risus.</p>
      </div>

      <div id="ws_footer">
        <p>Copyright</p>
      </div>
    </div>
  </body>
</html>

 

profile

전생과 현생에서 내가 만든 모든 죄를 사죄 합니다.

그리고 천성을 고치도록 하겠습니다.

번호 제목 작성자 날짜 조회 수
» 가로 2차메뉴 file 리한 2021.03.14 45
2 첨부파일 보이기 숨기기 옵션추가 리한 2020.09.28 42
1 메뉴 고정 소스 리한 2020.01.26 1420
linux korea