SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Member
    Join Date
    Dec 2012
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Suckerfish dropdown not hovering properly

    Hello,

    I found this thread via a google search. I got a going pretty good but my sub menu isn't working correctly with hovering. Can anyone help me out here? I have wasted hours and hours trying to get this to work.

    http://beachiappelli.com/

    Layout Code:



    Code:
    <ul class="menu">
    	<li class="music"><a href="#">music</a>
               <ul id="nav">
            	<li class="press"><a href="#">press</a></li>
                    <li class="live"><a href="#">live</a></li>
                    <li class="album"><a href="#">album</a></li>
               </ul></li>
    	
        <li class="blog"><a href="#">blog</a></li>
        <li class="projects"><a href="#">projects</a></li>
        <li class="bio"><a href="#">bio</a></li>
    </ul>

    CSS
    Code:
    .music-header
    {
    position:absolute;
    left:375px;
    top:135px;
    z-index:-1;
    }
    
    
    .menu {
    	list-style: none;
               margin: 154px;
    	
    }
    .menu li {	
    	height: 114px;
    	list-style: none;
    	background-repeat: no-repeat;
    }
    #menu li ul {
    	position: absolute;
    	width: 10em;
    	left: -9999em;
    }
    #menu li:hover ul, #nav li.sfhover ul {
    	left: auto;
    }
    .menu li a, .nav li a:visited {
    	display: block;
    	text-decoration: none;
    	text-indent: -9999px;
    	height: 114px;
    	background-repeat: no-repeat;
    }
    
    .music {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/music-roll.png); width: 170px;}
    .music a {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/music.png);}
    .blog {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/blog-roll.png); width: 152px;}
    .blog a {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/blog.png);}
    .projects {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/projects-roll.png); width: 213px;}
    .projects a {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/projects.png);}
    .bio {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/bio-roll.png); width: 280px;}
    .bio a {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/bio.png);}
    
    
    .press {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/press-roll.png); width: 190px;}
    .press a {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/press.png);}
    .live {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/live-roll.png); width: 190px;}
    .live a {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/live.png);}
    .album {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/album-roll.png); width: 190px;}
    .album a {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/album.png);}
    
    
    
    ul.menu li a:hover {background: none;}
    .menu li {float: left;}
    .menu:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
    }
    #nav li:hover ul ul, #nav li.sfhover ul ul {
    	left: -9999em;
    }

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,546
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The menu isn't hovering because you have mixed an ID instead of a class here:

    Code:
    #menu li ul {
    	position: absolute;
    	width: 10em;
    	left: -9999em;
    }
    #menu li:hover ul, #nav li.sfhover ul {
    	left: auto;
    }

    You don't have an id of menu you have a class.

    e.g.
    Code:
    .menu li ul {
    	position: absolute;
    	width: 10em;
    	left: -9999em;
    }
    .menu li:hover ul, #nav li.sfhover ul {
    	left: auto;
    }
    You've also mixed #nav in their also which is the ie6 fix for hover and you don't have an id of #nav.
    Code:
    #nav li.sfhover ul
    If you are supporting ie6 then you will need to add an id of #nav to the ul.

    Code:
    <ul id="nav" class="menu">

  3. #3
    SitePoint Member
    Join Date
    Dec 2012
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks so much. That was pretty stupid on my part. At least the first part. I should have figured that out.

    One final question:

    How do I narrow the spacing between the submenu listings so that they are stacked on top of each other? Also, how do I move the submenu of music up so its 5px or so under the music.png?

    Each submenu graphic is 30px tall. The main menu has a height of 114 px because of depth of the letter "j" in the projects.png. So the spacing would conflict I believe. I believe I have to do something with z-index but I'm not really sure how to do it.

    Thanks a ton!



    http://beachiappelli.com/

    Here's my updated code:

    <ul id="nav" class="menu">

    <li class="music"><a href="#">music</a>
    <ul id="nav">
    <li class="press"><a href="#">press</a></li>
    <li class="live"><a href="#">live</a></li>
    <li class="album"><a href="#">album</a></li>
    </ul></li>

    <li class="blog"><a href="#">blog</a></li>
    <li class="projects"><a href="#">projects</a></li>
    <li class="bio"><a href="#">bio</a></li>
    </ul>
    CSS

    .music-header
    {
    position:absolute;
    left:375px;
    top:135px;
    z-index:-1;
    }


    .menu {
    list-style: none;
    margin: 154px;

    }
    .menu li {
    height: 114px;
    list-style: none;
    background-repeat: no-repeat;
    }
    .menu li ul {
    position: absolute;
    width: 10em;
    left: -9999em;
    }
    .menu li:hover ul, #nav li.sfhover ul {
    left: auto;
    }
    .menu li a, .nav li a:visited {
    display: block;
    text-decoration: none;
    text-indent: -9999px;
    height: 114px;
    background-repeat: no-repeat;
    }



    .music {background-image: url(http://beachiappelli.com/wp-content/...sic-roll.png); width: 170px;}
    .music a {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/music.png);}
    .blog {background-image: url(http://beachiappelli.com/wp-content/...log-roll.png); width: 152px;}
    .blog a {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/blog.png);}
    .projects {background-image: url(http://beachiappelli.com/wp-content/...cts-roll.png); width: 213px;}
    .projects a {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/projects.png);}
    .bio {background-image: url(http://beachiappelli.com/wp-content/...bio-roll.png); width: 280px;}
    .bio a {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/bio.png);}


    .press {background-image: url(http://beachiappelli.com/wp-content/...ess-roll.png); width: 190px;}
    .press a {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/press.png);}
    .live {background-image: url(http://beachiappelli.com/wp-content/...ive-roll.png); width: 190px;}
    .live a {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/live.png);}
    .album {background-image: url(http://beachiappelli.com/wp-content/...bum-roll.png); width: 190px;}
    .album a {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/album.png);}



    ul.menu li a:hover {background: none;}
    .menu li {float: left;}
    .menu:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
    }
    #nav li:hover ul ul, #nav li.sfhover ul ul {
    left: -9999em;
    }

    #nav li.sfhover ul

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,324
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    You can do those things by adding these styles:

    Code:
    .menu li li, .menu li li a, .nav li li a:visited {
      height: auto;
    }
    
    #nav ul {
    margin-top: -40px;
    }
    However, be aware that you still have the same ID on the top nav and the sub nav (id="nav"), but you are only allowed to use an ID once, so watch out for that. (Browsers may let you off, but it's not a good practice.)

  5. #5
    SitePoint Member
    Join Date
    Dec 2012
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Alright that worked and I'll take your advice and made my sub nav (id="nav2").


    What's causing the extra spacing between Press shot, Live performances, and Misc. Music graphics? I want these to be stacked on top of each other with no space in between the graphics.

    I tried this but it didn't work (graphics are each 30 px tall)

    .menu2 li {
    height: 30px;
    list-style: none;
    background-repeat: no-repeat;
    }

  6. #6
    SitePoint Member
    Join Date
    Dec 2012
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Never mind my above post. I got it working.

    http://beachiappelli.com/

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,324
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Those styles you put in do work for me. Make sure to refresh your browser a few times, or empty the cache, to see the changes. If that doesn't work, what browser are you using?

  8. #8
    SitePoint Member
    Join Date
    Dec 2012
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah they work. I just did some extra formatting.


    Thanks so much! I spent so many hours to get this to work. I just don't understand CSS yet. Enough to manipulate but starting something like this from stratch is a disaster.

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,324
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Glad it's working. You seem to have done alright to me. You just learn over time by tinkering with these things and seeing how others have done them.

  10. #10
    SitePoint Member
    Join Date
    Dec 2012
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello,

    One thing I can't figure out how to do. I want to add space between the menu graphic "Projects" and the top of the submenu "American" so that this submenu sits below the tail of the letter "J" in the word "projects". I want to do this without affecting the vertical spacing of the submenu under music. Can someone help me please?
    It would be greatly appreciated!


    http://beachiappelli.com/music/album-artwork/


    Code:
    ul.white-menu2 {
    z-index: 1000;
    }
    
    body.page-id-51 {
    background-image:url('http://beachiappelli.com/wp-content/themes/dynamik/css/images/background.png');
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:center top;
    z-index:-1;
    }
    
    .music-header
    position:fixed;
    top: 30px;
    z-index:-1;
    }
    
    .white-music-header
    {
    position:fixed;
    margin-left:auto;
    margin-right:auto;
    z-index:-1;
    }
    
    
    .white-menu {
    	list-style: none;
               margin-top: -30px;
               margin-left: 0px;
    	   float: left;	
    	
    }
    .white-menu li {	
    	height: 86px;
    	list-style: none;
    	background-repeat: no-repeat;
    }
    
    .white-menu2 li {	
            margin-left: 50px;
            height: 30px;
    	list-style: none;
    	background-repeat: no-repeat;
    }
    .white-menu3 li {	
            margin-left: 25px;
            height: 30px;
    	list-style: none;
    	background-repeat: no-repeat;
    }
    .white-menu li ul {
    	position: absolute;
    	width: 10em;
    	left: -9999em;
    }
    .white-menu li:hover ul, #nav li.sfhover ul {
    	left: auto;
    }
    .white-menu li a, .nav li a:visited {
    	display: block;
    	text-decoration: none;
    	text-indent: -9999px;
    	height: 86px;
    	background-repeat: no-repeat;
    }
    
    
    
    .white-music {background-image: url(http://beachiappelli.com/wp-content/...sic-roll.png); width: 169px;}
    .white-music a {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/white-music.png);}
    .white-blog {background-image: url(http://beachiappelli.com/wp-content/...log-roll.png); width: 122px;}
    .white-blog a {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/white-blog.png);}
    .white-projects {background-image: url(http://beachiappelli.com/wp-content/...cts-roll.png); width: 167px;}
    .white-projects a {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/white-projects.png);}
    .white-bio {background-image: url(http://beachiappelli.com/wp-content/...bio-roll.png); width: 224px;}
    .white-bio a {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/white-bio.png);}
    .white-press {background-image: url(http://beachiappelli.com/wp-content/...ess-roll.png); width: 190px;}
    .white-press a {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/press.png);}
    .white-live {background-image: url(http://beachiappelli.com/wp-content/...ive-roll.png); width: 190px;}
    .white-live a {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/live.png);}
    .white-album {background-image: url(http://beachiappelli.com/wp-content/...bum-roll.png); width: 190px;}
    .white-album a {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/album.png);}
    .white-american {background-image: url(http://beachiappelli.com/wp-content/...can-roll.png); width: 188px;}
    .white-american a {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/american.png);}
    .white-liberty {background-image: url(http://beachiappelli.com/wp-content/...rty-roll.png); width: 188px;}
    .white-liberty a {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/liberty.png);}
    .white-portraits {background-image: url(http://beachiappelli.com/wp-content/...its-roll.png); width: 188px;}
    .white-portraits a {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/portraits.png);}
    .white-weddings {background-image: url(http://beachiappelli.com/wp-content/...ngs-roll.png); width: 188px;}
    .white-weddings a {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/weddings.png);}
    
    
    
    
    
    ul.white-menu li a:hover {background: none;}
    .white-menu li {float: left;}
    .white-menu:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
    }
    
    
    #white-nav li:hover ul ul, #white-nav li.sfhover ul ul {
    	left: -9999em;
    }
    
    #white-nav li.sfhover ul
    
    .white-menu li li, .menu li li a, .white-nav li li a:visited {
      height: auto;
    }
    
    #white-nav ul {
    margin-top: -30px;
    }
    
    ul.white-menu3 {
    z-index: 1000;
    }
    
    
    
    
    .red-music-header
    {
    position:fixed;
    margin-left:auto;
    margin-right:auto;
    z-index:-1;
    }
    
    
    .red-menu {
    	list-style: none;
               margin-top: -25px;
               margin-left: 183px;
    	   float: left;	
    	
    }
    .red-menu li {	
    	height: 114px;
    	list-style: none;
    	background-repeat: no-repeat;
    }
    
    .red-menu2 li {	
            margin-left: 30px;        
            height: 30px;
    	list-style: none;
    	background-repeat: no-repeat;
    }
    
    
    
    .red-menu li ul {
    	position: absolute;
    	width: 10em;
    	left: -9999em;
    }
    .red-menu li:hover ul, #nav li.sfhover ul {
    	left: auto;
    }
    .red-menu li a, .nav li a:visited {
    	display: block;
    	text-decoration: none;
    	text-indent: -9999px;
    	height: 114px;
    	background-repeat: no-repeat;
    }
    
    
    
    .red-music {background-image: url(http://beachiappelli.com/wp-content/...sic-roll.png); width: 170px;}
    .red-music a {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/music.png);}
    .red-blog {background-image: url(http://beachiappelli.com/wp-content/...log-roll.png); width: 152px;}
    .red-blog a {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/blog.png);}
    .red-projects {background-image: url(http://beachiappelli.com/wp-content/...cts-roll.png); width: 213px;}
    .red-projects a {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/projects.png);}
    .red-bio {background-image: url(http://beachiappelli.com/wp-content/...bio-roll.png); width: 280px;}
    .red-bio a {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/bio.png);}
    .red-press {background-image: url(http://beachiappelli.com/wp-content/...ess-roll.png); width: 190px;}
    .red-press a {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/press.png);}
    .red-live {background-image: url(http://beachiappelli.com/wp-content/...ive-roll.png); width: 190px;}
    .red-live a {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/live.png);}
    .red-album {background-image: url(http://beachiappelli.com/wp-content/...bum-roll.png); width: 190px;}
    .red-album a {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/album.png);}
    .red-american {background-image: url(http://beachiappelli.com/wp-content/...can-roll.png); width: 188px;}
    .red-american a {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/american.png);}
    .red-liberty {background-image: url(http://beachiappelli.com/wp-content/...rty-roll.png); width: 188px;}
    .red-liberty a {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/liberty.png);}
    .red-portraits {background-image: url(http://beachiappelli.com/wp-content/...its-roll.png); width: 188px;}
    .red-portraits a {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/portraits.png);}
    .red-weddings {background-image: url(http://beachiappelli.com/wp-content/...ngs-roll.png); width: 188px;}
    .red-weddings a {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/weddings.png);}
    
    
    
    
    
    ul.red-menu li a:hover {background: none;}
    .red-menu li {float: left;}
    .red-menu:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
    }
    
    
    #red-nav li:hover ul ul, #red-nav li.sfhover ul ul {
    	left: -9999em;
    }
    
    #red-nav li.sfhover ul
    
    .red-menu li li, .menu li li a, .red-nav li li a:visited {
      height: auto;
    }
    
    #red-nav ul {
    margin-top: -35px;
    }
    
    
    #red-nav3 ul {
    margin-top: -15px;
    }
    
    
    .bio-music-header
    {
    position:fixed;
    margin-left:auto;
    margin-right:auto;
    z-index:-1;
    }
    
    
    .bio-menu {
    	list-style: none;
               margin-top: -50px;
               margin-left: 249px;
    	   float: left;	
    }
    
    
    .bio-menu li {	
    	height: 86px;
    	list-style: none;
    	background-repeat: no-repeat;
    }
    
    .bio-menu2 li {	
            margin-left: 50px;
            height: 30px;
    	list-style: none;
    	background-repeat: no-repeat;
    }
    
    .bio-menu3 li {	
            margin-left: 20px;
            height: 30px;
    	list-style: none;
    	background-repeat: no-repeat;
    }
    
    .bio-menu li ul {
    	position: absolute;
    	width: 10em;
    	left: -9999em;
    }
    .bio-menu li:hover ul, #nav li.sfhover ul {
    	left: auto;
    }
    .bio-menu li a, .nav li a:visited {
    	display: block;
    	text-decoration: none;
    	text-indent: -9999px;
    	height: 86px;
    	background-repeat: no-repeat;
    }
    
    
    .bio-music {background-image: url(http://beachiappelli.com/wp-content/...sic-roll.png); width: 169px;}
    .bio-music a {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/white-music.png);}
    .bio-blog {background-image: url(http://beachiappelli.com/wp-content/...log-roll.png); width: 122px;}
    .bio-blog a {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/white-blog.png);}
    .bio-projects {background-image: url(http://beachiappelli.com/wp-content/...cts-roll.png); width: 167px;}
    .bio-projects a {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/white-projects.png);}
    .bio-bio {background-image: url(http://beachiappelli.com/wp-content/...bio-roll.png); width: 224px;}
    .bio-bio a {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/white-bio.png);}
    
    
    .bio-press {background-image: url(http://beachiappelli.com/wp-content/...ess-roll.png); width: 190px;}
    .bio-press a {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/press.png);}
    .bio-live {background-image: url(http://beachiappelli.com/wp-content/...ive-roll.png); width: 190px;}
    .bio-live a {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/live.png);}
    .bio-album {background-image: url(http://beachiappelli.com/wp-content/...bum-roll.png); width: 190px;}
    .bio-album a {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/album.png);}
    .bio-american {background-image: url(http://beachiappelli.com/wp-content/...can-roll.png); width: 188px;}
    .bio-american a {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/american.png);}
    .bio-liberty {background-image: url(http://beachiappelli.com/wp-content/...rty-roll.png); width: 188px;}
    .bio-liberty a {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/liberty.png);}
    .bio-portraits {background-image: url(http://beachiappelli.com/wp-content/...its-roll.png); width: 188px;}
    .bio-portraits a {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/portraits.png);}
    .bio-weddings {background-image: url(http://beachiappelli.com/wp-content/...ngs-roll.png); width: 188px;}
    .bio-weddings a {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/weddings.png);}
    
    
    ul.bio-menu li a:hover {background: none;}
    .bio-menu li {float: left;}
    .bio-menu:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
    }
    
    
    #bio-nav li:hover ul ul, #bio-nav li.sfhover ul ul {
    	left: -9999em;
    }
    
    #bio-nav li.sfhover ul
    
    .bio-menu li li, .menu li li a, .bio-nav li li a:visited {
      height: auto;
    }
    
    #bio-nav ul {
    margin-top: -15px;
    }
    
    
    
    #bio-nav3 li:hover ul ul, #bio-nav3 li.sfhover ul ul {
    	left: -9999em;
    }
    
    #bio-nav3 li.sfhover ul
    
    .bio-menu3 li li, .menu li li a, .bio-nav li li a:visited {
      height: auto;
    }
    
    
    #bio-nav3 ul {
    margin-top: -15px;
    }
    Last edited by Paul O'B; Dec 15, 2012 at 09:39. Reason: code tags added

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,546
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    If you only want that single menu item moved then you can do it via the class you have on that item.

    e.g.
    Code:
    #white-nav ul.white-menu3{margin-top:0}
    If you want all items at the same point then just remove the class from the above rule.

    Note you have used the same ID more than once in that menu which is not allowed (e.g. you have used id="white-nav2" in 2 places). Id's are unique and there should only be one of the same name on a page.

  12. #12
    SitePoint Member
    Join Date
    Dec 2012
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks again. As far as using the same ID more than once business...are you talking about in my CSS or my HTML?

  13. #13
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,613
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    In the HTML. An id can only occur once on a page.


Bookmarks

Posting Permissions

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