Over-riding body style in html

I'm using a markdown to html javascript converter (markdeep). Conversion is in the browser. So a raw markdown document is sent to the browser and markdeep adds it's styling. Problem is I want to add a top menu across the page full width, but the markdeep body styling limits this width due to a body style, according to firefox web developer tool. I want to keep markdeep's styling intact for the document but over-ride it for the menu.

I've added a style tag to the top of the markdown document and it is working good except for the width as noted above. Here is my code -

<head>
<style>
#tpmenu {
  width: 100%;
}
#tpmenu ul {
  list-style: none;
  padding: 0;
  margin: 0;
  background: #1bc2a2;
}

#tpmenu ul li {
  display: block;
  position: relative;
  float: left;
  background: #1bc2a2;
}

/* This hides the dropdowns */


#tpmenu li ul { display: none; }

#tpmenu ul li a {
  display: block;
  padding: 1em;
  text-decoration: none;
  white-space: nowrap;
  color: #fff;
}

#tpmenu ul li a:hover { background: #2c3e50; }

/* Display the dropdown */


#tpmenu li:hover > ul {
  display: block;
  position: absolute;
}

#tpmenu li:hover li { float: none; }

#tpmenu li:hover a { background: #1bc2a2; }

#tpmenu li:hover li a:hover { background: #2c3e50; }

#tpmenu .main-navigation li ul li { border-top: 0; }

/* Displays second level dropdowns to the right of the first level dropdown */


#tpmenu ul ul ul {
  left: 100%;
  top: 0;
}

/* Simple clearfix */



#tpmenu ul:before,
#tpmenu ul:after {
  content: " "; /* 1 */
  display: table; /* 2 */
}

#tpmenu ul:after { clear: both; }
</style>
</head>




<div id="tpmenu">

<ul class="main-navigation">
  <li><a href="#">Home</a></li>
  <li><a href="#">Front End Design</a>
    <ul>
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a>
        <ul>
          <li><a href="#">Resets</a></li>
          <li><a href="#">Grids</a></li>
          <li><a href="#">Frameworks</a></li>
        </ul>
      </li>
      <li><a href="#">JavaScript</a>
        <ul>
          <li><a href="#">Ajax</a></li>
          <li><a href="#">jQuery</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li><a href="#">WordPress Development</a>
    <ul>
      <li><a href="#">Themes</a></li>
      <li><a href="#">Plugins</a></li>
      <li><a href="#">Custom Post Types</a>
        <ul>
          <li><a href="#">Portfolios</a></li>
          <li><a href="#">Testimonials</a></li>
        </ul>
      </li>
      <li><a href="#">Options</a></li>
    </ul>
  </li>
  <li><a href="#">About Us</a></li>
</ul>
</div>


<h1>Multi-Level Drop Down Menu with Pure CSS</h1>



# LitePub 


A lightweight static blog generator written in Go.

> Why another one? I wrote a blog post that briefly describes
[why I created it](http://www.mirovarga.com/a-lightweight-static-blog-generator-in-go.html).

## Overview

LitePub is a static blog generator that tries to be as easy to use as possible.

It requires no software dependencies, needs no configuration files, uses no
databases. All it needs is one binary, posts written in
[Markdown](https://en.wikipedia.org/wiki/Markdown) and a set of templates to
render the posts to static HTML files.

Posts don't have to include any special metadata (aka front matter) like title
or date in them - the title, date and optional tags are parsed from
the natural flow of the posts.

## Quick Start

To create a sample blog follow these steps:

1. Download a [release](https://github.com/mirovarga/litepub/releases) and
unpack it to a directory.

2. `cd` to the directory.

3. Create a sample blog:

  	```
  	$ ./litepub create
  	```

4. Build the blog:

	```
	$ ./litepub build
  Generating: index.html
  Generating: tags/reference.html
  Generating: tags/tutorial.html
  Generating: tags/advanced.html
  Generating: tags/docs.html
  Generating: tags/basics.html
  Generating: overview.html
  Generating: quick-start.html
  Generating: installation.html
  Generating: creating-a-blog.html
  Generating: creating-posts.html
  Generating: generating-html-files-for-a-blog-aka-building-a-blog.html
  Generating: serving-a-blog.html
  Generating: templates.html
  Generating: getting-help.html
	```



<script>window.markdeepOptions = {tocStyle: 'none'};</script>

<!-- Markdeep: --><style class="fallback">body{visibility:hidden;white-space:pre;font-family:monospace}</style><script src="https://casual-effects.com/markdeep/latest/markdeep.min.js" charset="utf-8"></script><script src="markdeep.min.js" charset="utf-8"></script><script>window.alreadyProcessedMarkdeep||(document.body.style.visibility="visible")</script>

Solution

Simplest solution may be to use fixed or absolute positioning to pull tpmenu out of the normal document flow so it is not constrained by the max-width that is applied to body.

Though you will need to do something about the menu on smaller viewports.

#tpmenu {
  position: fixed;
  top: -20px; /* Same as padding applied to <body>. */
  left: 0;
  width: 100%;
}
#tpmenu ul {
  list-style: none;
  padding: 0;
  margin: 0;
  background: #1bc2a2;
}

#tpmenu ul li {
  display: block;
  position: relative;
  float: left;
  background: #1bc2a2;
}

/* This hides the dropdowns */


#tpmenu li ul { display: none; }

#tpmenu ul li a {
  display: block;
  padding: 1em;
  text-decoration: none;
  white-space: nowrap;
  color: #fff;
}

#tpmenu ul li a:hover { background: #2c3e50; }

/* Display the dropdown */


#tpmenu li:hover > ul {
  display: block;
  position: absolute;
}

#tpmenu li:hover li { float: none; }

#tpmenu li:hover a { background: #1bc2a2; }

#tpmenu li:hover li a:hover { background: #2c3e50; }

#tpmenu .main-navigation li ul li { border-top: 0; }

/* Displays second level dropdowns to the right of the first level dropdown */


#tpmenu ul ul ul {
  left: 100%;
  top: 0;
}

/* Simple clearfix */



#tpmenu ul:before,
#tpmenu ul:after {
  content: " "; /* 1 */
  display: table; /* 2 */
}

#tpmenu ul:after { clear: both; }

<div id="tpmenu">

<ul class="main-navigation">
  <li><a href="#">Home</a></li>
  <li><a href="#">Front End Design</a>
    <ul>
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a>
        <ul>
          <li><a href="#">Resets</a></li>
          <li><a href="#">Grids</a></li>
          <li><a href="#">Frameworks</a></li>
        </ul>
      </li>
      <li><a href="#">JavaScript</a>
        <ul>
          <li><a href="#">Ajax</a></li>
          <li><a href="#">jQuery</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li><a href="#">WordPress Development</a>
    <ul>
      <li><a href="#">Themes</a></li>
      <li><a href="#">Plugins</a></li>
      <li><a href="#">Custom Post Types</a>
        <ul>
          <li><a href="#">Portfolios</a></li>
          <li><a href="#">Testimonials</a></li>
        </ul>
      </li>
      <li><a href="#">Options</a></li>
    </ul>
  </li>
  <li><a href="#">About Us</a></li>
</ul>
</div>


<h1>Multi-Level Drop Down Menu with Pure CSS</h1>



# LitePub 


A lightweight static blog generator written in Go.

> Why another one? I wrote a blog post that briefly describes
[why I created it](http://www.mirovarga.com/a-lightweight-static-blog-generator-in-go.html).

## Overview

LitePub is a static blog generator that tries to be as easy to use as possible.

It requires no software dependencies, needs no configuration files, uses no
databases. All it needs is one binary, posts written in
[Markdown](https://en.wikipedia.org/wiki/Markdown) and a set of templates to
render the posts to static HTML files.

Posts don't have to include any special metadata (aka front matter) like title
or date in them - the title, date and optional tags are parsed from
the natural flow of the posts.

## Quick Start

To create a sample blog follow these steps:

1. Download a [release](https://github.com/mirovarga/litepub/releases) and
unpack it to a directory.

2. `cd` to the directory.

3. Create a sample blog:

  	```
  	$ ./litepub create
  	```

4. Build the blog:

	```
	$ ./litepub build
  Generating: index.html
  Generating: tags/reference.html
  Generating: tags/tutorial.html
  Generating: tags/advanced.html
  Generating: tags/docs.html
  Generating: tags/basics.html
  Generating: overview.html
  Generating: quick-start.html
  Generating: installation.html
  Generating: creating-a-blog.html
  Generating: creating-posts.html
  Generating: generating-html-files-for-a-blog-aka-building-a-blog.html
  Generating: serving-a-blog.html
  Generating: templates.html
  Generating: getting-help.html
	```



<script>window.markdeepOptions = {tocStyle: 'none'};</script>

<!-- Markdeep: --><style class="fallback">body{visibility:hidden;white-space:pre;font-family:monospace}</style><script src="https://casual-effects.com/markdeep/latest/markdeep.min.js" charset="utf-8"></script><script src="markdeep.min.js" charset="utf-8"></script><script>window.alreadyProcessedMarkdeep||(document.body.style.visibility="visible")</script>