Drop Down Menu from existing navbar

Question

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

Michael Eugene Yuen · Accepted Answer · 2016-05-13T01:31:49.367

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>

Thank you, I've change it to class for the 'dropdown', but the first part of the css I edited a long time ago, do the duplicate entries affect the drop down menus? I'm too tired to tidy things up at the mo... — Vanisha, May 13 '16 at 01:31
The duplicates seem not the factor. But the id is important as your css point to class not id. That's why it doesn't change from display: none to block; I have updated the answer so the drop-nav be clickable while #dropdown:hover. I haven't spent much time fixing the positioning but have at least shown you how it works — Michael Eugene Yuen, May 13 '16 at 01:35
Your answer works great for one sub item, but when I add more, the main link is no longer clickable and sub items aren't in a straight vertical line, would you be able to suggest how to fix that? — Vanisha, May 13 '16 at 02:14
for .menu, I suggest you to add the right bracket '>' for immediate child. It would be easier for you to manage, particularly padding and margin. Read this http://stackoverflow.com/questions/746525/how-is-the-greater-than-or-character-used-in-css — Michael Eugene Yuen, May 13 '16 at 02:35

score 1 · Answer 2 · answered May 13 '16 at 01:27

1

First, use a html select to create the dropdown.

Put a label above it and make it clickable.

answered May 13 '16 at 01:27

Ronnie Royston

16,778
6
77
91

Drop Down Menu from existing navbar

2 Answers2