CODEWITHSUNDEEP
htmlcss
Elcid_91
Elcid_91

Reputation: 1681

CSS Navigation menu not dropping the sub menu

Created a navigation menu with one drop menu. For some reason I am unable to get the correct CSS dropping the menu on "Main 3." Would someone mind looking at my CSS to see if there is something I may have missed.

HTML

<ul class="navmenu">
   <li><a href="#" id="mnu_Home">Main 1</a></li>
   <li><a href="#" id="mnu_aboutus">Main 2</a></li>
   <li>
      <a href="#" id="mnu_Services">Main 3</a>
      <ul>
         <li><a href="#" id="mnu_painmanagement">Sub 1</a></li>
         <li><a href="#" id="mnu_weightloss">Sub 2 </a></li>
         <li><a href="#" id="mnu_cosmetic">Sub 3</a></li>
         <li><a href="#" id="mnu_vitamins">Sub 4</a></li>
      </ul>
   </li>
   <li><a href="#" id="mnu_testimonials">Main 4</a></li>
   <li><a href="#" id="mnu_patientforms">Main 5</a></li>
   <li><a href="#" id="mnu_contactus">Main 6</a></li>
   <li><a href="#" id="mnu_patientportal">Main 7</a></li>
</ul>

CSS

.navmenu{
    background: #510E2A;
    height: 35px;
    margin: 0;
    padding: 0;
    list-style-type: none;
    overflow: hidden;
    text-align: justify;
}
.navmenu li{
    float: left;
}
.navmenu li a{
    display: block;
    padding:9px 20px;
    text-decoration: none;
    font-family: THCFontSemiBold;
    color: #f3ac3f;
    font-weight: bold;
}
.navmenu ul{
    list-style-type: none;
    position: absolute;
    z-index: 1000;
    left: -9999em;
}
.navmenu li:hover{
    position: relative;
}
.navmenu li:hover ul {
    left:0px;
    top:30px;
    background:#5FD367;
    padding:0px;
}
.navmenu li:hover ul li a {
    padding:5px;
    display:block;
    width:168px;
    text-indent:15px;
    background-color:red;
}
.navmenu li:hover ul li a:hover { background:#005555; }

Fiddle is here

Upvotes: 0

Views: 42

Answers (1)

Abhishek Mishra
Abhishek Mishra

Reputation: 192

Just remove overflow from navmenu

.navmenu{
    background: #510E2A;
    height: 35px;
    margin: 0;
    padding: 0;
    list-style-type: none;
    text-align: justify;
}

Updated Fiddle

Upvotes: 3

Related Questions