Adding drop down sub menu to code

Question

I have been trying to add a drop down menu to this code but always seem to get turned around. I just want a basic look to the subnav with a simple rollover effect. Every time i try different code it uses home image in the drop down menu and will not disappear when it is not hovered over. Ideas?

HTML:

   <ul class="navbar">
      <li class="navbar1"><a href="home.html" title="Home">Home</a>
      <ul class="subnav"> 
               <li><a href="#">Menu 1 </a></li>
               <li><a href="#">Menu 2 </a></li>
           </ul>
         </li>

    </ul>

CSS:

ul.navbar {
width:1000px;
list-style:none;
height:40px;
}
ul.navbar li {
display:inline;
}
ul.navbar li a {
height:40px;
float:left;
text-indent:-9999px;
}
/* Home 0 */
ul.navbar li.navbar1 a {
width:86px;
background:url(../pelican%20outfitters/navbar2.fw.png)
 no-repeat 0 0; 
}
ul.navbar  li.navbar1 a:hover {
background-position:0 -40px; 
}
ul.navbar  li.navbar1 a.current {
background-position:0 -80px; 
}

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

HTML

   <nav>
        <ul class="navbar">
            <li class="navbar1"><a href="home.html" title="Home">Home</a>
    
                <ul class="subnav">
                    <li><a href="#">Menu 1 </a>
    
                    </li>
                    <li><a href="#">Menu 2 </a>
    
                    </li>
                </ul>
            </li>
        </ul>
    </nav>

CSS

nav {
    margin: 20px auto;
    
}
nav ul ul {
    display: none;
}
nav ul li:hover > ul {
    display: block;
}
nav ul li
{
    width:100px;
}

ul li ul li
{  width:200px;

}
nav ul {
    font-size: 25px;
    background: white;
    padding: 0px;
    border-radius: 10px;
    border-style: solid;
    list-style: none;
    position: relative;
    display: inline-table;
}
nav ul:after {
    content:"";
    clear: both;
    display: block;
}
nav ul li {
    float: left;
}
nav ul li:hover {
    background: black;
    position:relative;
    z-index:1;
}
nav ul li:hover a {
    color: white;
    position:relative;
    z-index:1;
}
nav ul li a {
    display: block;
    padding: 15px 20px;
    color: black;
    text-decoration: none;
}
nav ul ul {
    background: #000000;
    border-radius: 0px 0px 10px 10px;
    padding: 0;
    position: absolute;
    top: 100%;
}
nav ul ul li {
    float: none;
}
nav ul ul li a {
    padding: 15px 20px;
}
nav ul ul li a:hover {
    background: #2E2E2E;
    border-radius: 10px;
}

Output:

enter image description here

Working Fiddle

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jan 28, 2014 at 13:42

Amarnath Balasubramanian

9,5028 gold badges38 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

mitchell Over a year ago

Amarnath How would I dd my current, active, and hover image to this? Each image would have a different size as well. This is the issue I ran into before because even when I did enter in my image it would not show the whole image, only a portion of it.

Carl0s1z · Accepted Answer · 2014-01-30 10:13:06Z

1

You should delete the text-indent:-9999px and add this to your css

Delete row:

ul.navbar li a { text-indent:-9999px }

Css:

.navbar li ul {display:none;}
.navbar li:hover ul {display:block;}

Than you have a basic navbar with hidden subnavs.
From here you can try it with your image.

The demo is your code with the new code..

DEMO

More like you want is, dont delete the css.. but only add those 2 lines and this 1:

.navbar li:hover li a{ text-indent:1px; background:white; }

DEMO 2 (without your img (don't know what it is)).

Latest update after the fiddle comment:
You should specify your html and css.. a just added a class to the first link class="home" and to accomodations class="accomodations"

And changed it in the css..

/* Home */
ul.navbar li.navbar1 a.home {
   width:86px;
   background:url(http://s12.postimg.org/rszejjscd/navbar2_fw.png)
   no-repeat 0 0; 
}
/* Accomodations */
   ul.navbar li.navbar2 a.accomodations {
   width:220px;
   background: url(http://s12.postimg.org/rszejjscd/navbar2_fw.png) no-repeat -86px 0;
}

DEMO 3

edited Jan 30, 2014 at 10:13

answered Jan 28, 2014 at 12:55

Carl0s1z

4,7237 gold badges34 silver badges49 bronze badges

7 Comments

mitchell Over a year ago

I added these three lines of code. This is what I am getting now, the hidden subnav when hovered over shoots out to the right in the div and pushes my next nav main menu over. Example Home,Home,Home,Home,Home,Home, Accomodations.Then when not hovered over it will go back to Example Home, Accomodations. I tried position absolute but that made it worse. Also the style you recommended is not showing up. It is still using the image from my nav bar, Would rather simple CSS kind of what fiddle posted above for the look of the subnav with a simple rollover.

Carl0s1z Over a year ago

Can you make a jsfiddle with your image inside? So i can see whats wrong?

mitchell Over a year ago

In your demo the subnavmeu for home shoots right, I need it to shoot down and be able to customize the css for the subnav.

mitchell Over a year ago

Here is my latest, I started coding the rest of my menu in the mean time. I set position to absolute which is creating my vertical navbar, yahhhh, but it is only displaying one menu. The navbar has a black space on the left side of it. Lastly the images still cant be formated for the subnav. jsfiddle.net/mitchelll182/Z7kB2/1

Carl0s1z Over a year ago

Im trying to make it work, hang on. 1 thing, add padding:0; to you <ul>

|

Collectives™ on Stack Overflow

Adding drop down sub menu to code

2 Answers 2

Working Fiddle

1 Comment

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related