CODEWITHSUNDEEP
htmlcssdrop-down-menunavbar
Vanisha
Vanisha

Reputation: 13

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;
}

Upvotes: 1

Views: 285

Answers (2)

Michael Eugene Yuen
Michael Eugene Yuen

Reputation: 2528

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>

Upvotes: 1

Ronnie Smith
Ronnie Smith

Reputation: 18555

First, use a html select to create the dropdown.

Put a label above it and make it clickable.

Upvotes: 1

Related Questions