I'm writing a homepage and I need a dropbox menu, so I found a demo for dropbox menu from googling. But the codes did not work properly even if I applied the demo. Its layout is quite ridiculous.
The #menubar is parallel with #site_content but I intended to place #memubar that contains dropbox menu virtically followed by #site_content. Please refer below source code for detail.
HTML code:
<!DOCTYPE HTML>
<html>
<head>
<title>main</title>
<meta name="description" content="website description" />
<meta name="keywords" content="website keywords, website keywords" />
<meta http-equiv="content-type" content="text/html; charset=windows-1252" />
<link rel="stylesheet" type="text/css" href="style/style.css?ver=1" />
</head>
<body>
<div id="main">
<div id="header">
<div id="logo">
<h1><a href="index.html"><span class="logo_colour">Homepage</span></a></h1>
<h2>Test</h2>
</div>
<div id="menubar">
<ul id="menu">
<li class="selected"><a href="index.html">Menu1</a></li>
<li>
<a href="#">Menu2▾</a>
<ul class="dropdown">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</li>
<li><a href="#" class="ellipsis">Memu3</a></li>
<li><a href="#" class="ellipsis">Menu4</a></li>
</ul>
</div>
</div>
<div id="site_content">
<h1>Welcome to Homepage<br/>
We welcome you. <br/><br/><br/></h1>
</div>
<div id="footer">
<section align="left" class="visitor bg_white">
<b>Address:</b> Address <br />
<b>Phone:</b> Phone<br/>
<b>Email:</b> <a href="mailto:test@test.com">test@test.com</a><br/><br/>
</section>
<p class="day">Copyright © 2016 CAS Lab. All rights reserved.</p>
</div>
</div>
<script src="http://ift.tt/2eBd7UN"></script>
<script type="text/javascript" src="./js/common.js?ver=1"></script>
</body>
</html>
css code:
html
{ height: 100%;}
*
{ margin: 0;
padding: 0;}
body
{ font: normal .80em trebuchet ms, sans-serif;
background: #EEE;
color: #5D5D5D;}
#site_content h1
{ font: normal 140% 'century gothic', arial, sans-serif;
}
a, a:hover
{ outline: none;
text-decoration: underline;
color: #000000;}
a:hover
{ text-decoration: none;
color: #747474; }
.left
{ float: left;
width: auto;
margin-right: 10px;}
.right
{ float: right;
width: auto;
margin-left: 10px;}
.center
{ display: block;
text-align: center;
margin: 20px auto;}
blockquote
{ margin: 20px 0;
padding: 10px 20px 0 20px;
border: 1px solid #E5E5DB;
background: #FFF;}
ul li
{
float: left;
display: inline-block;
position: relative;
line-height: 21px;
text-align: left;
}
ul li a
{
display: block;
padding: 8px 25px;
color: #333;
text-decoration: none;
}
ul li a:hover{
color: #fff;
background: #939393;
}
ul li ul.dropdown{
min-width: 100%; /* Set width of the dropdown */
background: #f2f2f2;
display: none;
position: absolute;
z-index: 999;
left: 0;
}
ul li:hover ul.dropdown{
display: block; /* Display the dropdown */
}
ul li ul.dropdown li{
display: block;
}
#main, #logo, #menubar, #site_content, #footer
{ margin-left: auto;
margin-right: auto;}
#main
{ padding-bottom: 20px;}
#header
{ background: transparent;
height: 170px;}
#menubar
{ height: 24px;
width: 900px;}
#site_content
{ width: 858px;
overflow: hidden;
margin: 0 auto 0 auto;
padding: 10px 20px 20px 20px;
background: #fcfcfa;
border: 15px solid #FFF;}
#site_content h1 a
{ text-decoration: none; }
#site_content.article
{
font-size:100%
}
.sidebar
{ float: right;
width: 190px;
padding: 0 15px 20px 15px;}
.sidebar ul
{
padding: 0;
list-style: none;
background: #f2f2f2;
}
.sidebar li
{ list-style: none;
padding: 0 0 7px 0; }
.sidebar li a, .sidebar li a:hover
{ padding: 0 0 0 25px;
display: block;
background: transparent url(link.png) no-repeat left center;}
.sidebar li a.selected
{ color: #444;
text-decoration: none;}
.dropdown {
position: relative;
/** Make it fit tightly around it's children */
display: inline-block;
}
.dropdown .dropdown-menu {
position: absolute;
/**
* Set the top of the dropdown menu to be positioned 100%
* from the top of the container, and aligned to the left.
*/
top: 100%;
left: 0;
/** Allow no empty space between this and .dropdown */
margin: 0;
list-style: none; /** Remove list bullets */
width: 100%; /** Set the width to 100% of it's parent */
padding: 0;
}
/**
* Apply these styles to .dropdown-menu when user hovers
* over .dropdown
*/
.dropdown:hover .dropdown-menu {
/** Show dropdown menu */
display: block;
}
Aucun commentaire:
Enregistrer un commentaire