html 상단 헤더 질문입니다..
본문
상단 헤더를 회사 소개에 마우스를 가져다 대면 밑에 내용들이 나오게 하고 싶은데.... 어떻게 해야 할까요??
<body>
<div class="one">
<ul class="two">
<li>
<a href="#">회사소개</a>
<!--<ul class="submenu">
<li><a href="#">인사말</a></li>
<li><a href="#">각종 인증내역</a></li>
<li><a href="#">회사연혁</a></li>
<li><a href="#">찾아오시는 길</a></li>
</ul> -->
</li>
<li>
<a href="#">사업분야</a>
</li>
<li>
<a href="#">사업실적</a>
</li>
<li>
<a href="#">커뮤니티</a>
</li>
</ul>
</div>
<div class="three">
<img class="slide" src="img/slide1.png">
</div>
<div class="business">
<div class="container">
<h1>
<span>+ more</span>
<b style="padding-top:10px;display: block;padding-left:50px;">스마트하게, 위생적으로, 효율적으로!</b>
</h1>
<ul>
<li>
<img width="35%" src="img/공장.jpg">
<p>
<b class="1">Plant business</b>
플랜트 사업
<span>
축적된 경험과 노하우를 기반으로 구매 설계 자재공급 및<br>시운전 등을 포함한 서비스를 고객의 요구에 맞게 제공합니다.
</span>
</p>
</li>
<li><img width="35%" src="img/공장2.jpg">
<p>
<b class="2">R&D business</b>
연구개발 사업
<span>
기존의 설비에 안주하는 것이 아닌 항상 새롭고 편리한 설비와<br>자체적인 샘플기계를 제작보유하고 있습니다.
</span>
</p>
</li>
<li><img width="35%" src="img/공장3.jpg">
<p>
<b class="3">Production process</b>
제작 진행과정
<span>
대주ENG만의 차별화된 기술력과 그동안 쌓은 전문적인 노하우를 바탕으로 고객님들께 신뢰와 믿음으로 보답하겠습니다.
</span>
</p>
</li>
</ul>
</div>
</div>
</body>
저는 여기까지 html 코드 짜봤는데 css까지 하면 너무 길어질까봐....
혹시 저렇게 만드려면 html, css 어떻게 해야 하는지 가르쳐 주시면 정말 감사하겠습니다.....
부탁 드릴게요ㅠㅠ