CODEWITHSUNDEEP
cssdrop-down-menu
angela
angela

Reputation: 31

Dropdown menu horizontal instead of vertical

I have been trying to figure out how to fix this drop-down menu. It seems to look okay until I hover and the menu appears horizontal instead of vertical. Is it something wrong with the css?

Thanks for your help!

JS Fiddle

HTML

<body> 
<div id="wrapper">
<div id="header"></div>
<nav id="mainnav"><img src="../images/Website/banner.jpg" width="1280" height="120">
 <ul style="list-style: none;">
      <li><a href="../index.html">Home</a></li>
      <li><a href="../research.htm">Research</a></li>
      <li><a href="../susantaylor.htm">Susan Taylor</a></li>
      <li><a href="../LaboratoryMembers.html">Lab Members</a>
          <ul>
                <li><a href="../currentmembers.htm">Current Members</a></li>
                <li><a href="../formermembers.htm">Former Members</a></li>
                <li><a href="../gallery.htm">Gallery</a></li>
          </ul>
      </li>
      <li><a href="../publications.htm">Publications</a></li>
      <li><a href="../links.htm">Links</a></li>
      <li><a href="../contact.htm">Contact Us</a></li>
</ul>
  </nav>

  <br>
 </br>
<div id= "content" align="center"> 
<br>
<div id="content-spacer-top"> </div>
    <div id="content-inner"> <!-- TemplateBeginEditable name="EditRegion3" --  >EditRegion3<!-- TemplateEndEditable --></div>
   <div id="content-space bottom"></div>

</div>
<footer class="footer" id="footer">
  <div align="center">
  <p>Taylor Laboratory<br> 
      Leichtag Biomedical Research Building
      4th Floor, Room 412
    <br>
    University of California, San Diego
    <br>
    9500 Gilman Dr. mc0654<br>
  La Jolla, CA 92093
  <br>
  Ph: (858) 534-8190
  <br>
  Fax: (858) 534-8193 </p>
</div>
</footer>


</div>


</body>

CSS li ul{ display:none; }

li:hover ul{
  display:block;
}
body {
    margin: 0px;
    background-color: #CCCCCC;
}
.content {
    background-color: #FFFFFF;
    padding-right: 6px;
    padding-left: 6px;
}
.footer {
    background-color: #357f7f;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 8px;
    color: #FFFFFF;
    position: absolute;
}
#content {
    background-color: #FFFFFF;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    min-height: 100%;
    height: auto;
}


a {
    text-decoration: none;
}
#wrapper {
    background-color: #FFFFFF;
    width: 1280px;
    min height: 100%;
    position: relative;
    height: auto;
    min-height: 100%
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
 }
#content-spacer-top {
    height: 10px;
}

#content-spacer-bottom{
    height:1%;
}

#header {
    background-color: #357f7f;
    height: 2%;
    width: 100%;
}
#mainnav a  {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    color: #000000;
    text-decoration: none;
    background-color: #FFFFFF;
    float: left;
    text-align: center;
    width: 14.28%;
    padding-top: 6px;
    padding-right: 0px;
    padding-bottom: 6px;
    padding-left: 0px;
    display: block;
    list-style-type: none;
    clear: none;
    margin: 0px;
    height: 2%;
    border-top-width: thin;
    border-right-width: thin;
    border-bottom-width: thin;
    border-left-width: thin;
    border-top-style: solid;
    border-right-style: none;
    border-bottom-style: solid;
    border-left-style: none;
    border-top-color: #357F7F;
    border-right-color: #357F7F;
    border-bottom-color: #357F7F;
    border-left-color: #357F7F;
}
#mainnav ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}

#mainnav a:hover,#mainnav a:active,#mainnav a:focus {
color: #FFFFFF;
text-decoration: none;
background-color: #357F7F;
}
.style2 {
font-size: small;
color: #FFFFFF;
}

a:visited {
color: #FFFFFF;
background-color: #357F7F;
}
.style4 {font-size: x-small}
.style5 {background-color: #357f7f; font-family: arial;}
#footer {
width:1280px;
height:120px;
float:left;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
text-transform: uppercase;
}

Upvotes: 0

Views: 6334

Answers (1)

Jordan
Jordan

Reputation: 1121

Alright, so after having a look at your updated fiddle I was able to see the problem straight away. Firstly your code is really messy (sorry, but it is haha) and you have so many unnecessary css declarations.

It was so badly written I have just written a brand new fiddle and included a working navigation bar. Find the relevant code below.

HTML:

<nav>
     <ul>
          <li><a href="../index.html">Home</a></li>
          <li><a href="../research.html">Research</a></li>
          <li><a href="../susantaylor.html">Susan Taylor</a></li>
          <li><a href="../LaboratoryMembelrs.html">Lab Members</a>
              <ul>
                    <li><a href="../currentmembers.html">Current Members</a></li>
                    <li><a href="../formermembers.html">Former Members</a></li>
                    <li><a href="../gallery.html">Gallery</a></li>
              </ul>
          </li>
          <li><a href="../publications.html">Publications</a></li>
          <li><a href="../links.html">Links</a></li>
          <li><a href="../contact.html">Contact Us</a></li>
    </ul>
</nav>

CSS:

nav {
    display: table;
    border-top: 1px solid #357F7F;
    border-bottom: 1px solid #357F7F;
}
nav ul {
    display: table-row;
    position: relative;
    margin: 0;
    padding: 0;
    z-index: 1;
}
nav ul a {
    display: block;
    color: black;
    text-decoration: none;
    padding: 10px 15px;
    font-family: Arial, Helvetica, sans-serif;
}
nav ul li {
    position: relative;
    display: inline-block;
    display: table-cell;
    width: 1%;
    list-style-type: none;
    text-align: center;
}
nav ul li:hover {
    background-color: #357F7F;
}
nav ul li:hover a {
    color: white;
}
nav ul ul{
    display: none;
    position: absolute;
    background: rgba(0,0,0,0.4);
    width: 100%; 
}
nav ul ul li {
    width: 100%;
    display: inline-block;
}
nav ul li:hover > ul {
    display: block;
}

JSFiddle

Hope this helps! :)

Upvotes: 1

Related Questions