CODEWITHSUNDEEP
htmlcss
mitchell
mitchell

Reputation: 31

Adding drop down sub menu to code

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

Upvotes: 3

Views: 229

Answers (2)

Carl0s1z
Carl0s1z

Reputation: 4723

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

Upvotes: 1

Amarnath Balasubramanian
Amarnath Balasubramanian

Reputation: 9460

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

Upvotes: 1

Related Questions