Vanisha Vanisha - 6 months ago 27
HTML Question

Drop Down Menu from existing navbar

I want to add drop down menus to specific items in an existing horizontal navbar. I've done some tailoring to the html and css based on the majority of examples I've seen but the menu still isn't showing up...how can I get the sub menu links to appear below one specific main menu link and would I be able to keep that main menu link clickable?
(its on http://www.pure-ly.com )

HTML

<div class='nav'>
<ul class='menu' id='menu'>
<li id='dropdown'>
<a href='#'>Main Item </a>
<ul class='drop-nav' id='drop-nav'>
<li><a href='#'>Sub Item</a></li>
</ul>
</li>
</ul>
</div>


CSS

*{
margin:0;
padding:0;
outline:0;
}
.nav {
width:101%;
height:auto;
border-bottom:1px solid #eee;
margin:10px auto 5px;
display:inline-block;
}
.menu {
width:auto;
list-style:none;
font:$pagenavifont;
text-align:center;
margin:0 auto;
}
.menu a {
float:left;
color:#999;
text-decoration:none;
text-transform:uppercase;
display: inline;
width:auto;
line-height:36px;
padding:0 37px;
}
.menu a:hover,li.menuhover a{
color:#111;
}
.menu li {
position:relative;
float:center;
display:inline;
left:205px;
width:auto;
}
.menu li {
position:relative;
float:center;
display:inline;
left:205px;
width:auto;
}
.menu li:last-child {
background:none;
}
.menu ul{
display:none;
position:absolute;
top:36px;
left:0;
background:#fbfbfb;
display:none;
list-style:none;
}
.menu ul li{
float:none;
border-top:1px solid #e3e3e3;
border-right:1px solid #e3e3e3;
border-left:1px solid #e3e3e3;
width:auto;
background:none;
}
.menu ul li:last-child {
border-bottom:1px solid #e3e3e3
}
.menu ul li a{
float:none;
display:block;
background:none;
line-height:36px;
min-width:137px;
width:auto;
text-align:left;
padding-left:10px;
color:#444;
}
.menu ul li a:hover{
background:#fdfdfd;
color:#777;
}
.navbar li ul li a {
border-left: 1px solid #1f5065;
border-right: 1px solid #1f5065;
border-top: 1px solid #74a3b7;
border-bottom: 1px solid #1f5065;
}
.dropdown {
position:relative;
}
.drop-nav {
position:absolute;
display:none;
}
.drop-nav li {
border-bottom: 1px solid rga(255,255,255,.2);
}
.dropdown:hover > .drop-nav{
display:block;
}

Answer

First you have duplicated entries for some css elements.

Second, you have used id for your 'dropdown' not class

}
.nav {
  width:101%;
  height:auto;
  border-bottom:1px solid #eee;
  margin:10px auto 5px;
}
.menu {
  width:auto;
  list-style:none;
  text-align:center;
  margin:0 auto;
  display: inline;
}
.menu a {
  float:left;
  color:#999;
  text-decoration:none;
  text-transform:uppercase;
  display: inline;
  width:auto;
  line-height:36px;
  padding:0 37px;
}
.menu a:hover,li.menuhover a{
  color:#111;
}
.menu li {
  position:relative;
  float:center;
  display:inline-block;
  left:205px;
  width:auto;
}

.menu li:last-child {
  background:none;
}
.menu > ul{
  display:block;
  position:absolute;
  top:36px;
  left:0;
  background:#fbfbfb;
  list-style:none;
}

.menu ul li{
  float:none;
  border-top:1px solid #e3e3e3;
  border-right:1px solid #e3e3e3;
  border-left:1px solid #e3e3e3;
  width:auto;
  background:none;
}
.menu ul li:last-child {
    border-bottom:1px solid #e3e3e3
}
.menu > ul li a{
  float:none;
  display:block;
  background:none;
  line-height:36px;
  min-width:137px;
  width:auto;
  text-align:left;
  padding-left:10px;
  color:#444;
}
.menu > ul li a:hover{
    background:#fdfdfd;
    color:#777;
}
.navbar li ul li a  {
    border-left: 1px solid #1f5065; 
    border-right: 1px solid #1f5065; 
    border-top: 1px solid #74a3b7; 
    border-bottom: 1px solid #1f5065; 
}
#dropdown {
  position:relative;
}
.drop-nav {
  position:absolute;
  top: 0;
  left: -100%;
  padding-top: 30px;
  display:none;
  padding-left: 0;
  margin-left: 0;
}
.drop-nav li {
  border-bottom: 1px
    solid rga(255,255,255,.2);
}
#dropdown:hover > .drop-nav{
  display:block;
}
<div class='nav'>
<ul class='menu' id='menu'>
 <li id='dropdown'>
  <a href='#'>Main Item </a>
    <ul class='drop-nav' id='drop-nav'>
   <li><a href='#'>Sub Item</a></li>
  </ul>
 </li>
</ul>
</div>