How to set height of <nav> in html or css

Question

How can I decrease the size of a <nav> tag in CSS? I cannot seem to figure it out. I have provided all of the code from my project below. My code did have PHP, but I have removed it due to it being unnecessary. Here is a JSFiddle, if you wish to preview the code there.

HTML and CSS:

#top-menu {
  top: 0;
  position: fixed;
}
nav {
  position: relative;
  /*float: left;*/
  width: 100%;
  background: #1E1E1E;
  /*    display: table; */
  margin: 0;
  text-align: center;
  height: 25px;
  border: none;
  border-width: 0;
  margin: 0;
  padding: 10px 10px;
}
nav ul ul {
  display: none;
}
nav ul li:hover > ul {
  display: block;
  border: none;
  border-width: 0;
}
nav ul {
  background: #1E1E1E;
  color: white;
  padding: 10px 10px;
  border-radius: 0;
  list-style: none;
  position: relative;
  display: inline-table;
  border-width: 0;
  border: none;
}
nav ul:after {
  content: "";
  clear: both;
  display: block;
}
nav ul li {
  float: left;
  border: none;
  border-width: 0;
}
nav ul li:hover {
  background: #1E1E1E;
  background-color: orange;
  color: white;
}
nav ul li:hover a {
  color: #fff;
}
nav ul li a {
  display: block;
  height: 25px;
  padding: 10px 10px;
  color: #757575;
  text-decoration: none;
  border: none;
  border-width: 0;
}
nav ul ul {
  background: #1E1E1E;
  color: white;
  border-radius: 0px;
  padding: 10px 10px;
  position: absolute;
  top: 50px;
  border-width: 0;
  margin-bottom: 0;
}
nav ul ul li {
  float: none;
  border-top: 1px solid #6b727c;
  border-bottom: 1px solid #575f6a;
  position: relative;
}
nav ul ul li a {
  padding: 10px 10px;
  color: #fff;
  height: auto;
}
nav ul ul li a:hover {
  background: #4b545f;
  background-color: orange;
}
nav ul ul ul {
  position: absolute;
  left: 100%;
  top: 0;
}
nav li#english a {
  background: url(images/english.jpg) no-repeat;
  background-position: center center;
}
nav li#english a:hover {
  background: url(images/english.jpg) no-repeat;
  background-position: center center;
  background-color: orange;
}
nav li#english a.current {
  background: url(images/english.jpg) no-repeat;
  background-position: center center;
  cursor: default;
}
/*--------------------------------------------*/

#menu {
  background-color: #1E1E1E;
  text-align: center;
  padding-bottom: 0px;
}
body {
  margin: 0px;
}
.clearfloat {
  clear: both;
  margin: 0;
  padding: 0;
}
/*--------------------------------------------*/

#bottom {
  float: left;
  width: 100%;
  background: #1E1E1E;
  /*display: table; */
  margin: 0;
  text-align: center;
  min-height: 25px;
  height: 25px;
  border-width: 0px;
  margin-top: 0px;
  padding-top: 0px;
  bottom: 0px;
  position: fixed;
}
#bottom ul ul {
  display: none;
}
#bottom ul li:hover > ul {
  display: block;
}
#bottom ul {
  background: #1E1E1E;
  color: white;
  padding: 0 0;
  border-radius: 0;
  list-style: none;
  position: relative;
  display: inline-table;
}
#bottom ul:after {
  content: "";
  clear: both;
  display: block;
}
#bottom ul li {
  float: left;
}
#bottom ul li:hover:nth-child(1) {
  background: #1E1E1E;
  color: #757575;
  text-decoration: none;
}
#bottom ul li:hover:nth-child(2) {
  background: #1E1E1E;
  color: #757575;
  text-decoration: none;
}
#bottom ul li:hover {
  background: #1E1E1E;
  color: white;
  text-decoration: underline;
}
#bottom ul li:hover a {
  color: #fff;
}
#bottom ul li a {
  display: block;
  padding: 25px 40px;
  color: #757575;
  text-decoration: none;
}
#bottom ul ul {
  background: #1E1E1E;
  color: white;
  border-radius: 0px;
  padding: 0;
  position: absolute;
  top: 100%;
  width: auto;
}
#bottom ul ul li {
  float: none;
  border-top: 1px solid #6b727c;
  border-bottom: 1px solid #575f6a;
  position: relative;
}
#bottom ul ul li a {
  padding: 15px 40px;
  color: #fff;
}
#bottom ul ul li a:hover {
  background: #4b545f;
}
#bottom ul ul ul {
  position: absolute;
  left: 100%;
  top: 0;
}
/*--------------------------------------------*/

.bottommenuitem {
  vertical-align: middle;
  padding: 25px 40px;
  color: #757575;
}

<!DOCTYPE html5>
<html>

<head>
  <title>Firma A/S</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="cssMenu.css">
</head>

<body>
  <nav id="top-menu">
    <p id="menu" style="margin-bottom: -25">
      <a href="Index.html">
        <img src="Tilbage.jpg" alt="Tilbage" width="243" height="243" />
      </a>
      <img src="Top_10.jpg" alt="" width="739" height="243" />
    </p>
    <nav id="top">
      <ul>
        <li><a href="index.php">Velkommen</a>
        </li>
        <li><a href="index.php">Firma A/S</a>
          <ul>
            <li><a href="index.php">Koncern oversigt</a>
              <ul>
                <li><a href="index.php">Ejendomsselskaber</a>
                </li>
                <li><a href="index.php">Investeringsselskaber</a>
                </li>
                <li><a href="index.php">Øvrige selskaber</a>
                </li>
                <li><a href="index.php">Lukkede eller solgte selskaber</a>
                </li>
              </ul>
            </li>
            <li><a href="index.php">Jubilæum</a>
            </li>
            <li><a href="index.php">Årsrapport</a>
            </li>
            <li><a href="index.php">Galleri</a>
            </li>
            <li><a href="index.php">Kontaktoplysninger</a>
            </li>
          </ul>
        </li>
        <li><a href="index.php">Privat</a>
        </li>
        <li><a href="index.php">Køb og salg</a>
        </li>
        <li><a id="english" href="index.php">In English</a>
        </li>
      </ul>
      <!-- PHP was here -->
    </nav>
  </nav>
  <div style="margin-top: 410; margin-bottom: 115">
    <!-- More PHP was here -->
  </div>
  <nav id="bottom">
    <ul>
      <li class="bottommenuitem">Firma A/S</li>
      <li class="bottommenuitem">phone No</li>
      <li><a href="mailto:xxxx@xxx.xx">xxx@xxx.xx</a>
      </li>
    </ul>
  </nav>
</body>

</html>

Any help is appreciated, thank you.

Answer 1

If you are talking about the fixed nav id=top-menu, just add a height to the CSS for the id selector. It works for me. If you have problems with it being overridden, make sure that it is placed lower in the CSS file or add !important after the rule.

#top-menu {
    height: 6px;
}

#top-menu {
    height: 6px !important;
}

Answer 2

nav {
  float: left;
  width: 100%;
  background: #1E1E1E;
  display: table;
  margin: 0;
  text-align: center;
  height: 25px;
  border: none;
  border-width: 0;
  margin: 0;
  padding: 10px 10px;
}
nav ul ul {
  display: none;
}
nav ul li:hover > ul {
  display: block;
  border: none;
  border-width: 0;
}
nav ul {
  background: #1E1E1E;
  color: white;
  padding: 10px 10px;
  border-radius: 0;
  list-style: none;
  position: relative;
  display: inline-table;
  border-width: 0;
  border: none;
}
nav ul:after {
  content: "";
  clear: both;
  display: block;
}
nav ul li {
  float: left;
  border: none;
  border-width: 0;
}
nav ul li:hover {
  background: #1E1E1E;
  background-color: orange;
  color: white;
}
nav ul li:hover a {
  color: #fff;
}
nav ul li a {
  display: block;
  height: 25px;
  padding: 10px 10px;
  color: #757575;
  text-decoration: none;
  border: none;
  border-width: 0;
}
nav ul ul {
  background: #1E1E1E;
  color: white;
  border-radius: 0px;
  padding: 10px 10px;
  position: absolute;
  top: 50px;
  border-width: 0;
  margin-bottom: 0;
}
nav ul ul li {
  float: none;
  border-top: 1px solid #6b727c;
  border-bottom: 1px solid #575f6a;
  position: relative;
}
nav ul ul li a {
  padding: 10px 10px;
  color: #fff;
  height: auto;
}
nav ul ul li a:hover {
  background: #4b545f;
  background-color: orange;
}
nav ul ul ul {
  position: absolute;
  left: 100%;
  top: 0;
}
nav li#english a {
  background: url(images/english.jpg) no-repeat;
  background-position: center center;
}
nav li#english a:hover {
  background: url(images/english.jpg) no-repeat;
  background-position: center center;
  background-color: orange;
}
nav li#english a.current {
  background: url(images/english.jpg) no-repeat;
  background-position: center center;
  cursor: default;
}

<nav id="top-menu">
  <p id="menu" style="margin-bottom: -25">
    <a href="Index.html">
      <img src="Tilbage.jpg" alt="Tilbage" width="243" height="243" />
    </a>
    <img src="Top_10.jpg" alt="" width="739" height="243" />
  </p>
  <nav id="top">
    <ul>
      <li><a href="index.php">Velkommen</a>
      </li>
      <li><a href="index.php">Firma A/S</a>
        <ul>
          <li><a href="index.php">Koncern oversigt</a>
            <ul>
              <li><a href="index.php">Ejendomsselskaber</a>
              </li>
              <li><a href="index.php">Investeringsselskaber</a>
              </li>
              <li><a href="index.php">Øvrige selskaber</a>
              </li>
              <li><a href="index.php">Lukkede eller solgte selskaber</a>
              </li>
            </ul>
          </li>
          <li><a href="index.php">Jubilæum</a>
          </li>
          <li><a href="index.php">Årsrapport</a>
          </li>
          <li><a href="index.php">Galleri</a>
          </li>
          <li><a href="index.php">Kontaktoplysninger</a>
          </li>
        </ul>
      </li>
      <li><a href="index.php">Privat</a>
      </li>
      <li><a href="index.php">Køb og salg</a>
      </li>
      <li><a id="english" href="index.php">In English</a>
      </li>
    </ul>

  </nav>
</nav>

Answer 3

Please try this:

nav ul {
    background: #1e1e1e none repeat scroll 0 0;
    border: medium none;
    border-radius: 0;
    color: white;
    display: inline-table;
    list-style: outside none none;
    margin: 0;
    padding: 10px;
    position: relative;
}