www.webdeveloper.com
Results 1 to 4 of 4

Thread: Simple CSS drop down menu help

Hybrid View

  1. #1
    Join Date
    Oct 2012
    Posts
    1

    Simple CSS drop down menu help

    Hi all,

    I'm have a very annoying issue trying to implement a simple CSS based drop down menu into a nav bar. The nav bar is made up of 7 images that change opacity when hovered over. What I need to do is put a simple drop down box on the sixth menu item (FAQ) with two sub items which link off to their respectable pages. Now normally this is easy to do but I'm finding no matter how many online tutorials I find (13 so far), it doesn't work and ends up either just not working or messing up the whole layout of the nav bar.

    Anyways here is the HTML for the nav bar, very straight forward:

    Code:
    <div id="header">
         <div class="nav">
              <ul>
                   <li><a href="#"><img src="img/nav_1.png" alt="" /></a></li>
                  <li><a href="#"><img src="img/nav_2.png" alt="" /></a></li>
                  <li><a href="#"><img src="img/nav_3.png" alt="" /></a></li>
                  <li><a href="#"><img src="img/nav_4.png" alt="" /></a></li>
                  <li><a href="#"><img src="img/nav_5.png" alt="" /></a></li>
                  <li><a href="#""><img src="img/nav_6.png" alt="" /></a></li>
                       <ul>
                            <li><a href="#">Submenu 1</a></li>
                            <li><a href="#">Submenu 2</a></li>
                       </ul>
                  <li><a href="#"><img src="img/nav_7.png" alt="" /></a></li>
              </ul>
         </div>
    </div>

    And the CSS driving it at the moment is:

    Code:
    #header{
    	margin:122px 0 19px 0;
    	background:url(../img/nav_bg.png) no-repeat;
    	height:79px;
    }
    
    #header .nav{
    }
    
    #header .nav li{
    	margin:25px 30px 0 0;
    	display:inline-block;
    	zoom:1;
    	display:inline;
    	float:left;
    	opacity: 0.7;
    	filter: alpha(opacity=75);
    	position:relative;
    	top:0px;
    	left:17px;
    }
    
    #header .nav a{
    	margin:0 8px 0 0;
    	padding:26px -50px 23px 0;
    	opacity: 0.7;
    	filter: alpha(opacity=75);
    	float:left
    }
    
    #header .nav li.selected{
    	opacity: 1;
    	filter: alpha(opacity=100);
    }
    
    #header .nav li.selected a{
    	opacity: 1;
    	filter: alpha(opacity=100);
    }
    
    #header .nav li:hover{
    	opacity: 1;
    	filter: alpha(opacity=100);
    }
    
    #header .nav li:hover a{
    	/*background:url(../img/navbar_select.png) no-repeat; */
    	opacity: 1;
    	filter: alpha(opacity=100);
    }

    So yeah, the nav bar is pretty simple but I can't for the life of me work out how to implement some sort of drop down box using CSS. Any help with this coding would be very much appreciate.

    Kind Regards.

  2. #2
    Join Date
    Oct 2012
    Posts
    11
    Hello,

    Hope this is what you are looking for, sorry no style just quickly made.....

    ======================================================

    <style>
    #bar ul {
    list-style-type:none;
    position:absolute;
    }

    #bar ul li {
    float:left;
    }

    #bar li a {

    display: block;
    padding:10px;
    }

    #bar li ul {
    display: none;
    }

    #bar li:hover ul {
    display: block;
    }
    </style>

    <nav id="bar">
    <ul>
    <li>
    <a href="">stuff</a>
    <ul>
    <li> <a href="">More stuff</a> </li> <br />
    <li> <a href="">Even More Stuff!!!</a> </li><br />
    </ul>
    </li>
    <li> <a href="">stuff</a> </li>
    <li> <a href="">stuff</a> </li>
    <li> <a href="">stuff</a> </li>
    </ul>
    </nav>

  3. #3
    Join Date
    Aug 2012
    Location
    1453 Gingerwood ave, Milpitas CA 95035,
    Posts
    37
    I think lazyminion provide you the correct solution.........

  4. #4
    Join Date
    Oct 2012
    Posts
    15
    Why did you used list item for navigation menu to set an anchor text?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles