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:
* {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?
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.
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:
nav ul li {float: left; position: relative; line-height: 20px; [color=blue]border:1px solid transparent;[/color]}
nav ul li:hover {background: #3498DB;[color=blue]border:1px solid red;[/color]}
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.
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?
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.
/*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.
