CODEWITHSUNDEEP
htmlcss
nickeys
nickeys

Reputation: 137

homepage layout for dropbox menu is weird

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 vertically followed by #site_content. Please refer below source code for detail.

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;
}
<!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&#9662;</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:[email protected]">[email protected]</a>
        <br/>
        <br/>
      </section>
      <p class="day">Copyright &copy; 2016 CAS Lab. All rights reserved.</p>
    </div>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script type="text/javascript" src="./js/common.js?ver=1"></script>
</body>

</html>

Upvotes: 1

Views: 166

Answers (1)

Serg Chernata
Serg Chernata

Reputation: 12400

If you want nav and content side-by-side, the easiest option is to utilize flexbox. I also removed the 900px width you had set on the menu and cleaned up the dropdown positioning.

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 {
  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;
  right: -125px;
  top: 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;
  display: flex;
  flex-direction: row;
}
#header {
  background: transparent;
}
#menubar {
  height: 24px;
}
#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;
}
<!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&#9662;</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:[email protected]">[email protected]</a>
        <br/>
        <br/>
      </section>
      <p class="day">Copyright &copy; 2016 CAS Lab. All rights reserved.</p>
    </div>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script type="text/javascript" src="./js/common.js?ver=1"></script>
</body>

</html>

Upvotes: 1

Related Questions