SitePoint Sponsor

User Tag List

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

    No border in submenu

    Hi

    I am working on a menu for a new website (my testpage www.adoremus.info/index2.php) and as you can see if you hover over the submenu, the blue color goes all the way out to the edge, but I want a small border around it.

    This is my entire css-code as it look today:

    Code:
    * {padding: 0; margin: 0;}
    
    /* Main Menu*/
    nav {margin-top: 10px;}
    nav ul {list-style: none; background: #999; border-radius: 5px; padding: 0 5px;}
    nav ul:after {content: '.'; clear: both; visibility: hidden; display: block; height: 0px;}
    nav ul li {float: left; position: relative; line-height: 20px;}
    nav ul li a {display: block; color: #fff; font-weight: bold; font-size: 16px; text-decoration: none; padding: 14px 15px 15px; 
    	transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out;}
    nav ul li:hover {background: #3498DB;}
    nav ul li.active {background: #3498D9;}
    
    
    /*Sub Menu*/
    nav ul li > ul:before{
    	content: "";
    	border-style: solid; border-width: 0 9px 9px 9px; border-color: transparent transparent black transparent;
    	width: 0;
    	height: 0;
    	position: absolute;
    	left: 15px;
    	top: 5px;
    }
    
    nav ul li > ul {position: absolute; left: 14px; top: 95%; padding-top: 13px; background: none; width: 150px;}
    nav ul li > ul li:first-child {border-radius: 10px 10px 0 0;}
    nav ul li > ul li:last-child {border-radius: 0 0 10px 10px;}
    nav ul li > ul li {padding: 10px; background: #999; width: 100%;}
    nav ul li > ul li a {display: block; padding: 6px 9px; font-size: 14px; border-radius: 2px;}
    nav ul li > ul li:hover {background: #3498DB;}
    nav ul li > ul li.active {background: #000;}
    
    /*Sub Sub Menu*/
    nav ul li > ul li > ul {top: 0; left: 100%; padding 0; padding-left: 13px;}
    I cannot find where the error is, do you have any good ideas?

    Thanks
    Kind Regards

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,301
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Hi Adoremus.info. Welcome to the forums.

    It's not clear where you want the border, but you haven't attempted to add one at this stage. There is a border on the pseudo element which is used to make the upward pointing black arrow, which is working.

  3. #3
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,587
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    Hi, adoremus,

    As Ralph said, it's not clear where you want the border.

    If you want the border on the individual list items, you could add a transparent border to all of them then code the :hover and/or active list items with the desired border color. Something like this:
    Code:
    nav ul li {float: left; position: relative; line-height: 20px; border:1px solid transparent;}
    nav ul li:hover {background: #3498DB;border:1px solid red;}

  4. #4
    SitePoint Member
    Join Date
    Dec 2013
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi

    Thanks for the quick answers guys, and I'm sorry, both for the late reply and for being difuse in the original post.

    I am following this tutorial: http://www.youtube.com/watch?v=-YqLl-BXRp8, to see that I understand it all before I do it on my own.
    But as you can see in the clip he has a frame around the whole submenu, on the submenu on my testpage, this border is missing, but I can't find any mayor diffrences between our codes.

    So I want a frame around the whole menu and not around the individual menuitems.

    I hope it's more clear now.

    Kind Regards

  5. #5
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,237
    Mentioned
    194 Post(s)
    Tagged
    2 Thread(s)
    That tutorial is using CSS3

    Does the browser you're using to test support all the required CSS3?

  6. #6
    SitePoint Member
    Join Date
    Dec 2013
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes I am using Firefox 25.0.1 and the fadingeffects work in my browser.

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,301
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    The example in the video doesn't place a border around the UL. Rather, it puts padding on the LIs to keep them away from the edges of the UL.

  8. #8
    SitePoint Member
    Join Date
    Dec 2013
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That is correct ralph.m, so the question should not be why I can't get the border working, it should be where do I add the padding for the same effect as in the clip?
    I have tried to add padding on all kinds of places without getting it to work.

    So which line should I ad it to and how should it look like?

    Kind Regards

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,301
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Adoremus.info View Post
    I have tried to add padding on all kinds of places without getting it to work.
    You already have the padding on the LIs. But instead of putting the hover background color on the LI, you should put it on the A. So, change this

    Code:
    nav ul li > ul li:hover {
    background: #3498DB;
    }
    to this

    Code:
    nav ul li > ul li a:hover {
    background: #3498DB;
    }

  10. #10
    SitePoint Member
    Join Date
    Dec 2013
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It still dosen't work, if you place the mouse over one submenu the blue is still going all the way out to the border.
    But if you move the pointer to another submenu you can see that there is a smaller border around the link that you just left.


    Kind Regards

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,485
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    You haven't done exactly what Ralph suggested as you still have the hover rule in place for the list item.

    Code:
    #container ul li:hover {
        background: #3498DB;
    }
    Remove that rule and only the anchor will changer color.

  12. #12
    SitePoint Member
    Join Date
    Dec 2013
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry, I forgot to post the new code:

    Code:
    /*Sub Menu*/
    #container ul li > ul:before{
    	content: "";
    	border-style: solid; border-width: 0 9px 9px 9px; border-color: transparent transparent black transparent;
    	width: 0;
    	height: 0;
    	position: absolute;
    	left: 15px;
    	top: 5px;
    }
    
    #container ul li > ul { position: absolute; left: 14px; top: 80%; padding-top: 13px; background: none; width: 150px;z-index: -99999; opacity: 0;
    	-webkit-transition: all 0.3s ease-out;
    	-moz-transition: all 0.3s ease-out;
    	-ms-transition: all 0.3s ease-out;
    	-o-transition: all 0.3s ease-out;
    	transition: all 0.3s ease-out; }
    #container ul li:hover > ul {display: block; z-index: 100; opacity: 1; top: 95%; visibility: visible;}
    
    
    #container ul li > ul li:first-child {border-radius: 10px 10px 0 0;}
    #container ul li > ul li:last-child {border-radius: 0 0 10px 10px;}
    #container ul li > ul li {padding: 10px; background: #000; width: 100%;}
    #container ul li > ul li a {display: block; padding: 6px 9px; font-size: 14px; border-radius: 2px;}
    #container ul li > ul li a:hover { background: #3498DB; }
    #container ul li > ul li.active {background: #000;}
    I copied his code so it should be correct, but it still don't work.

    Kind Regards

  13. #13
    SitePoint Member
    Join Date
    Dec 2013
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I was a little bit hasty in reading your post Paul and missunderstood it.

    I made the changes you suggested and now it works perfectly.

    Thanks you guys for all the help and I will probably see you again soon.

    Kind Regards


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
  •