Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Regular Coder
    Join Date
    Feb 2006
    Posts
    168
    Thanks
    32
    Thanked 1 Time in 1 Post

    Stuck on the css for this simple vertical dropdown on navigation

    Hello Guys,

    I am having an issue figuring out how to make a few links as a vertical dropdown on 1 category on a navigation. Its actually a pre-existing website that I didnt make but they need a dropdown added now. Im not sure how to do it. It seems likle whenever I try, the dropdown lines up horizontally. I thought I can find the cause and solution here.

    this is my html
    Code:
    <div class="menu png">
    <ul class="wrapper">
    <li class="first"><a a class="act" href="index.html"><span>Home </span></a></li>
    <li><a href="#"><span>Page 2 </span></a>
    
    <ul>
    <li><a href="#"><span>Page 2a </span></a></li>
    <li><a href="#"><span>Page 2b </span></a></li> 
    <li><a href="#"><span>Page 2c </span></a></li>
    </ul>
    
    </li>
    <li><a href="#"><span>Page 3 </span></a></li>
    <li><a href="page4.html"><span>Page 4 </span></a></li>
    <li><a href="page5.html"><span>Page 5 </span></a></li>
    <li><a href="page6.html"><span>Page 6 </span></a></li>
    <li class="last"><a href="page7.html"><span>Page 7 </span></a></li>
    </ul>		
    </div>


    this is any css that I thought may be related to the navigation
    Code:
    a {text-decoration:underline; color:#747474;}
    a:hover {text-decoration:none;}
    ul {list-style:none;}
    ul li {
    	font-size:1.083em;
    	line-height:1em;
    	color:#5e6d94;
    	padding-bottom:12px;
    }
    li a {
    	color:#5E6D94;
    } 
    ul li a {
    display: block;
    }
    
    
    
    .menu li {
    	float:left;
    	padding-top: 0;
    	padding-right: 0;
    	padding-bottom: 0;
    	padding-left: 2px;
    	background-repeat: no-repeat;
    	background-position: left top;
    }
    .menu .first {background:none; padding-left:0;}
    
    .menu li a {
    	display:block;
    	font-family:Arial, Helvetica, sans-serif;
    	font-size:14px;
    	font-weight:bold;
    	color:#FFF;
    	cursor:pointer;
    	text-decoration:none;
    }
    .menu li a span {
    	display:block;
    	padding-top: 19px;
    	padding-right: 27px;
    	padding-bottom: 21px;
    	padding-left: 27px;
    }
    .menu li a:hover, .menu .act {
    	color:#5e6d94;
    	background:url(images/menu-tail-un.jpg) left top repeat-x;
    }
    .wrapper {
    width:100%; 
    overflow:hidden;
    }


    Any help would be appreciated. I'm at a hault until I can get this working.
    Last edited by gribbs100; 04-12-2011 at 12:38 AM.

  • #2
    Regular Coder
    Join Date
    Feb 2006
    Posts
    168
    Thanks
    32
    Thanked 1 Time in 1 Post
    I noticed that the people who ask nicely for help and follow the rules end up getting ignored while the people who don't follow posting guidelines and say:

    "need help now" or " Need a fast fix" or " must fix tonight" etc etc end up getting the help right away.

    This is my 2nd post this week that will end up fall off of the charts with no help. The last one was real important and still unsolved.

    Id appreciate any assistance any of you can give on this post and I am always grateful.

  • #3
    Regular Coder
    Join Date
    Feb 2006
    Posts
    168
    Thanks
    32
    Thanked 1 Time in 1 Post
    Can anybody help with this?

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,864
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    You need ad some more rules to your CSS, to get the drop down effect. Check http://htmldog.com/articles/suckerfish/dropdowns/
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    Regular Coder
    Join Date
    Feb 2006
    Posts
    168
    Thanks
    32
    Thanked 1 Time in 1 Post
    Thank you very much for that link. Would you be able to help further? The problem is that whenever I see a tutorial, they base it off of how their navigation is laid out so I don't know how to add in just the parts to make the drop down happen on my existing navigation.

    Maybe you can take a look at the code iv posted and let me know what parts are missing? Whenever I add in the <ul> links, those links line up horizontally under the navigation bar and not drop down vertically.

    Any help would be great.

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,864
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    <ul class="wrapper">
    Change that class="wrapper" to
    Code:
    <ul id="nav">
    and then just copy the CSS from their demo page at http://htmldog.com/articles/suckerfi...le/bones1.html (you may use browser's "view source" option to get it)
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    gribbs100 (04-12-2011)

  • #7
    Regular Coder
    Join Date
    Feb 2006
    Posts
    168
    Thanks
    32
    Thanked 1 Time in 1 Post
    Thank you very much!


  •  

    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
    •