Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

CSS two level horizontal menu

Status
Not open for further replies.

PeDa

Technical User
Oct 10, 2002
227
0
0
NL
I am trying to adapt a menu found on internet to this page. My problem is that the second level menu occupies the whole screen width, and not just the constrained width of the first level. Playing with the css properties of the subnav-content class (see below) has not yeilded me anything useable. Relevant code is:

Code:
.navbar {
  overflow: hidden;
  background-color: #333; 
}

.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.subnav {
  float: left;
  overflow: hidden;
}

.subnav .subnavbtn {
  font-size: 16px;  
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.navbar a:hover, .subnav:hover .subnavbtn {
  background-color: red;
}

.subnav-content {
  display: none;
  position:absolute;
  left:0;
  width:100%;
  background-color: red;
  z-index: 1;
}

.subnav-content a {
  float: left;
  color: white;
  text-decoration: none;
}

.subnav-content a:hover {
  background-color: #eee;
  color: black;
}

.subnav:hover .subnav-content {
  display: block;
}

Code:
<div class="navbar">
  <a href="#home">Home</a>
  <div class="subnav">
    <button class="subnavbtn">Royal Navy <i class="fa fa-caret-down"></i></button>
    <div class="subnav-content">
      <a href="#Personnel">Personnel</a>
      <a href="#Vessels">Vessels</a>
      <a href="#Campaigns">Campaigns</a>
      <a href="#Fleets">Fleets</a>
      <a href="#Losses">Losses</a>
      <a href="#Miscellaneous">Miscellaneous</a>
    </div>
  </div> 
  <a href="#Surgeon">Naval surgeon</a>
  <div class="subnav">
    <button class="subnavbtn">Slave trade <i class="fa fa-caret-down"></i></button>
    <div class="subnav-content">
      <a href="#Legislation">Legislation</a>
      <a href="#West">West African slave trade</a>
      <a href="#Niger">1841 Niger expedition</a>
      <a href="#East">East African slave trade</a>
    </div>
  </div>
  <a href="#Varia">Varia</a>
  <div class="subnav">
    <button class="subnavbtn">Wm. Loney R.N.<i class="fa fa-caret-down"></i></button>
    <div class="subnav-content">
      <a href="Loney.htm">Loney home</a>
      <a href="Life.htm">Life & career</a>
      <a href="Documents.htm">Documents</a>
      <a href="Album.htm">Album</a>
      <a href="Ships.htm">Ships</a>
      <a href="Portrait.htm">Portrait</a>
      <a href="Uniform.htm">Uniform</a>
    </div>
  </div>
  <a href="FunAndGames.htm">Fun</a>
  <a href="Search.htm" class="w3-right">Search this site</a>
</div>

 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top