I've recently resolved an issue that has been bothering me for a while with my CSS Navigation Bar. Now I have the problem of fixing it to the top so that it scrolls down when you scroll the page. I know the thing I need to add is Position: fixed; but I don't know where to add it.
My recent attempts resulted in the text being fixed but the background of the Navbar wouldn't. Any help is greatly appreciated.
My CSS
#cssmenu ul {
margin: 0;
padding: 0;
}
#cssmenu li {
margin: 0;
padding: 0;
}
#cssmenu a {
margin: 0;
padding: 0;
}
#cssmenu > ul {
display:table;
margin:0 auto;
}
#cssmenu ul {
list-style: none;
}
#cssmenu a {
text-decoration: none;
}
#cssmenu {
height: 70px;
background-color: #232323;
box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.4);
width: auto;
text-align: center;
}
#cssmenu > ul > li {
float: left;
margin-left: 15px;
position: relative;
}
#cssmenu > ul > li > a {
color: #a0a0a0;
font-family: Verdana, 'Lucida Grande';
font-size: 15px;
line-height: 70px;
padding: 15px 20px;
-webkit-transition: color .15s;
-moz-transition: color .15s;
-o-transition: color .15s;
transition: color .15s;
}
#cssmenu > ul > li > a:hover {
color: #ffffff;
}
#cssmenu > ul > li > ul {
opacity: 0;
visibility: hidden;
padding: 16px 0 20px 0;
background-color: #fafafa;
text-align: left;
position: absolute;
top: 55px;
left: 50%;
margin-left: -90px;
width: 180px;
-webkit-transition: all .3s .1s;
-moz-transition: all .3s .1s;
-o-transition: all .3s .1s;
transition: all .3s .1s;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
}
#cssmenu > ul > li:hover > ul {
opacity: 1;
top: 65px;
visibility: visible;
}
#cssmenu > ul > li > ul:before {
content: '';
display: block;
border-color: transparent transparent #fafafa transparent;
border-style: solid;
border-width: 10px;
position: absolute;
top: -20px;
left: 50%;
margin-left: -10px;
}
#cssmenu > ul ul > li {
position: relative;
}
#cssmenu ul ul a {
color: #323232;
font-family: Verdana, 'Lucida Grande';
font-size: 13px;
background-color: #fafafa;
padding: 5px 8px 7px 16px;
display: block;
-webkit-transition: background-color 0.1s;
-moz-transition: background-color 0.1s;
-o-transition: background-color 0.1s;
transition: background-color 0.1s;
}
#cssmenu ul ul a:hover {
background-color: #f0f0f0;
}
#cssmenu ul ul ul {
visibility: hidden;
opacity: 0;
position: absolute;
top: -16px;
left: 206px;
padding: 16px 0 20px 0;
background-color: #fafafa;
text-align: left;
width: 180px;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
}
#cssmenu ul ul > li:hover > ul {
opacity: 1;
left: 190px;
visibility: visible;
}
#cssmenu ul ul a:hover {
background-color: #cc2c24;
color: #f0f0f0;
}
You should add it to the overall container of all your nav items, from your css file I would guess this is the DOM element with id="cssmenu". Also you will want to add top: 0px; as well to assure that it stays at the 0 position.
EDIT:
css:
#my-nav-bar {
position: fixed;
top: 0px;
}
html:
<body>
<div id="my-nav-bar">
<!-- nav bar content -->
</div>
<!-- page content -->
</body>
Now the div with id="my-nav-bar" will stay fixed to the top of the window.
See this JSFiddle Example I just made
I assume that you #cssmenu is your main nav container, maybe give a try on
#cssmenu {
position: absolute;
}
Related
Here is the JSFiddle for the code: https://jsfiddle.net/93pwfrt8/
The menu I have at the moment currently looks like this:
I'm trying to achieve something along the lines of this:
For some reason the shadow of the sub menu of portfolio isn't reaching around the sub menu, and the shadow from the main menu is overlapping the sub menu.
Here is the html for the side bar:
<aside>
<nav>
<ul>
<li><a onclick = "$(#content).load(selector.php?content='about'); return false">About</a></li>
<li>Portfolio
<ul>
<li><a onclick = "$(#content).load(selector.php?content='about'); return false">About</a></li>
<li><a onclick = "$(#content).load(selector.php?content='about'); return false">About</a></li>
</ul>
</li>
</ul>
</nav>
</aside>
And the css:
html,
body {
height: 100%;
width: 100%;
}
nav {
text-align: center;
}
nav ul {
padding: 0px;
text-align: center;
list-style: none;
width: 100%;
-webkit-box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.9);
-moz-box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.9);
box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.9);
}
nav ul li {
color: #000;
padding: 20px;
font: bold 12px/18px sans-serif;
display: block;
position: relative;
background-color: #FFF;
cursor: pointer;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
nav ul li:hover {
background: #EBEBEB;
color: #F00;
}
nav ul li ul {
position: absolute;
top: 0px;
right: -60%;
width: 60%;
display: none;
opacity: 0;
visibility: hidden;
-webkit-transiton: opacity 0.2s;
-moz-transition: opacity 0.2s;
-ms-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
-transition: opacity 0.2s;
}
nav ul li ul li {
background: #EBEBEB;
display: block;
color: #fff;
width: 100%;
}
nav ul li ul li:hover {
background: #ABABAB;
}
nav ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
z-index: -1;
}
nav ul li>a {
text-decoration: none;
color: #000;
}
nav ul li:hover >a {
color: #F00;
}
aside {
float: left;
position: fixed;
width: 15%;
clear: both;
}
I'm looking for a solution with an explanation as to what I've done wrong so I don't mess up again.
though late in answering....but i would have preferred a little old school method, z-index!! :)
demo
nav ul {
z-index:1;/*added*/
position:relative;/*added*/
padding: 0px;
text-align: center;
list-style: none;
width: 100%;
-webkit-box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.9);
-moz-box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.9);
box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.9);
}
nav ul li ul {
position: absolute;
top: 0px;
right: -60%;
width: 60%;
display: none;
opacity: 0;
z-index:999; /*added*/
visibility: hidden;
-webkit-transiton: opacity 0.2s;
-moz-transition: opacity 0.2s;
-ms-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
-transition: opacity 0.2s;
}
You can achieve your desire situation by clip-path which can cut unwanted shadow.
Jsfiddle
html,
body {
height: 100%;
width: 100%;
}
nav {
text-align: center;
}
nav ul {
padding: 0px;
text-align: center;
list-style: none;
width: 100%;
-webkit-box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.9);
-moz-box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.9);
box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.9);
}
nav ul li {
color: #000;
padding: 20px;
font: bold 12px/18px sans-serif;
display: block;
position: relative;
background-color: #FFF;
cursor: pointer;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
nav ul li:hover {
background: #EBEBEB;
color: #F00;
}
nav ul li ul {
position: absolute;
top: 0px;
right: -100.1%;
z-index: 10;
-webkit-clip-path: polygon(17% 0, 100% 0%, 100% 75%, 100% 100%, 0% 103%, -9% 50%, 17% 50%);
clip-path: polygon(17% 0, 100% 0%, 100% 75%, 100% 100%, 0% 103%, -9% 50%, 17% 50%);
width: 100%;
display: none;
opacity: 0;
visibility: hidden;
-webkit-transiton: opacity 0.2s;
-moz-transition: opacity 0.2s;
-ms-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
-transition: opacity 0.2s;
}
nav ul li ul li {
background: #EBEBEB;
display: block;
color: #fff;
}
nav ul li ul li:hover {
background: #ABABAB;
}
nav ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
nav ul li>a {
text-decoration: none;
color: #000;
}
nav ul li:hover >a {
color: #F00;
}
aside {
float: left;
position: fixed;
width: 15%;
clear: both;
}
<aside>
<nav>
<ul>
<li><a onclick="$(#content).load(selector.php?content='about'); return false">About</a>
</li>
<li>Portfolio
<ul>
<li><a onclick="$(#content).load(selector.php?content='about'); return false">About</a>
</li>
<li><a onclick="$(#content).load(selector.php?content='about'); return false">About</a>
</li>
</ul>
</li>
</ul>
</nav>
</aside>
You can also use :pseudo element to add box-shadow
html,
body {
height: 100%;
width: 100%;
}
nav {
text-align: center;
}
nav ul {
padding: 0px;
text-align: center;
list-style: none;
width: 100%;
position: relative;
}
nav ul:after {
content: '';
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
z-index: -2;
-webkit-box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.9);
-moz-box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.9);
box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.9);
}
nav ul ul:after {
z-index: -2;
right: -70%;
}
nav ul li {
color: #000;
padding: 20px;
font: bold 12px/18px sans-serif;
display: block;
position: relative;
background-color: #FFF;
cursor: pointer;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
nav ul li:hover {
background: #EBEBEB;
color: #F00;
}
nav ul li ul {
position: absolute;
top: 0px;
right: -60%;
width: 60%;
display: none;
opacity: 0;
visibility: hidden;
-webkit-transiton: opacity 0.2s;
-moz-transition: opacity 0.2s;
-ms-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
-transition: opacity 0.2s;
}
nav ul li ul li {
background: #EBEBEB;
display: block;
color: #fff;
width: 100%;
}
nav ul li ul li:hover {
background: #ABABAB;
}
nav ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
z-index: -1;
}
nav ul li>a {
text-decoration: none;
color: #000;
}
nav ul li:hover >a {
color: #F00;
}
aside {
float: left;
position: fixed;
width: 15%;
clear: both;
}
<aside>
<nav>
<ul>
<li><a onclick="$(#content).load(selector.php?content='about'); return false">About</a>
</li>
<li>Portfolio
<ul>
<li><a onclick="$(#content).load(selector.php?content='about'); return false">About</a>
</li>
<li><a onclick="$(#content).load(selector.php?content='about'); return false">About</a>
</li>
</ul>
</li>
</ul>
</nav>
</aside>
I tried messing with float and margin but I can't seem to figure it out.
I have float:left; and margin-left:15px; maybe that's the problem?
I'm trying to figure out where to put my text-align:center; and display:inline-block (or display:inline)
What can I do to just center my links?
Here is my css code:
#cssmenu ul {
margin: 0;
padding: 0;
}
#cssmenu li {
margin: 0;
padding: 0;
}
#cssmenu a {
margin: 0;
padding: 0;
}
#cssmenu ul {
list-style: none;
}
#cssmenu a {
text-decoration: none;
}
#cssmenu {
height: 70px;
background-color: #232323;
box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.4);
width: 1150px;
margin:0 auto;
text-align: center;
}
#cssmenu > ul > li {
float:left;
margin-left: 15px;
position:relative;
}
#cssmenu > ul > li > a {
color: #e0e0e0;
font-family: Verdana, 'Lucida Grande';
font-size: 15px;
line-height: 70px;
padding: 15px 20px;
-webkit-transition: color .15s;
-moz-transition: color .15s;
-o-transition: color .15s;
transition: color .15s;
}
#cssmenu > ul > li > a:hover {
color: #ff0000;
}
#cssmenu > ul > li > ul {
opacity: 0;
visibility: hidden;
padding: 16px 0 20px 0;
background-color: #fafafa;
text-align: left;
position: absolute;
top: 55px;
left: 50%;
margin-left: -90px;
width: 180px;
-webkit-transition: all .3s .1s;
-moz-transition: all .3s .1s;
-o-transition: all .3s .1s;
transition: all .3s .1s;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
}
#cssmenu > ul > li:hover > ul {
opacity: 1;
top: 65px;
visibility: visible;
}
#cssmenu > ul > li > ul:before {
content: '';
display: block;
border-color: transparent transparent #fafafa transparent;
border-style: solid;
border-width: 10px;
position: absolute;
top: -20px;
left: 50%;
margin-left: -10px;
}
#cssmenu > ul ul > li {
position: relative;
}
#cssmenu ul ul a {
color: #323232;
font-family: Verdana, 'Lucida Grande';
font-size: 13px;
background-color: #fafafa;
padding: 5px 8px 7px 16px;
display: block;
-webkit-transition: background-color 0.1s;
-moz-transition: background-color 0.1s;
-o-transition: background-color 0.1s;
transition: background-color 0.1s;
}
#cssmenu ul ul a:hover {
background-color: #f0f0f0;
}
#cssmenu ul ul ul {
visibility: hidden;
opacity: 0;
position: absolute;
top: -16px;
left: 206px;
padding: 16px 0 20px 0;
background-color: #fafafa;
text-align: left;
width: 180px;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
}
#cssmenu ul ul > li:hover > ul {
opacity: 1;
left: 190px;
visibility: visible;
}
#cssmenu ul ul a:hover {
background-color: #cc2c24;
color: #f0f0f0;
}
Try this:
#cssmenu ul {
margin: 0;
padding: 0;
text-align: center; /* add this */
}
#cssmenu > ul > li {
display: inline-block /* instead of float:left; */
}
using this CSS code, how can i make it so there is an active/current class?
#cssmenu *{
z-index: 999
}
#cssmenu ul { margin: 0; padding: 0; text-align: center; }
#cssmenu li { margin: 0; padding: 0;}
#cssmenu a { margin: 0; padding: 0;}
#cssmenu ul {list-style: none;}
#cssmenu a {text-decoration: none;}
#cssmenu {height: 50px; background-color: #f36f25; box-shadow: 0px 2px 3px rgba(0,0,0,.4);}
#cssmenu > ul > li {
display: inline-block;
margin-left: 15px;
position: relative;
}
#cssmenu > ul > li > a {
color: #ffffff;
font-size: 15px;
line-height: 50px;
padding: 16px 20px;
-webkit-transition: color .15s;
-moz-transition: color .15s;
-o-transition: color .15s;
transition: color .15s;
}
#cssmenu > ul > li > a:hover {color: #ffffff; background-color:#666666; }
#cssmenu > ul > li > ul {
opacity: 0;
visibility: hidden;
padding: 16px 0 20px 0;
background-color: #eeeeee;
text-align: left;
position: absolute;
top: 30px;
left: 50%;
margin-left: -90px;
width: 180px;
-webkit-transition: all .3s .1s;
-moz-transition: all .3s .1s;
-o-transition: all .3s .1s;
transition: all .3s .1s;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
-moz-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
box-shadow: 0px 1px 3px rgba(0,0,0,.4);
}
#cssmenu > ul > li:hover > ul {
opacity: 1;
top: 50px;
visibility: visible;
}
#cssmenu > ul > li > ul:before{
content: '';
display: block;
border-color: transparent transparent rgb(250,250,250) transparent;
border-style: solid;
border-width: 10px;
position: absolute;
top: -20px;
left: 50%;
margin-left: -10px;
}
#cssmenu > ul ul > li { position: relative;}
#cssmenu ul ul a{
color: #000000;
font-size: 13px;
background-color: #eeeeee;
padding: 5px 8px 7px 16px;
display: block;
-webkit-transition: background-color .1s;
-moz-transition: background-color .1s;
-o-transition: background-color .1s;
transition: background-color .1s;
}
#cssmenu ul ul a:hover {background-color: #f36f25;}
#cssmenu ul ul ul {
visibility: hidden;
opacity: 0;
position: absolute;
top: -16px;
left: 206px;
padding: 16px 0 20px 0;
background-color: #eeeeee;
text-align: left;
width: 160px;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
-moz-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
box-shadow: 0px 1px 3px rgba(0,0,0,.4);
}
#cssmenu ul ul > li:hover > ul { opacity: 1; left: 196px; visibility: visible;}
#cssmenu ul ul a:hover{
background-color: #f36f25;
color: rgb(240,240,240);
}
fiddle is here of the full menu: http://jsfiddle.net/eza2Z/
Also, on the submenu there is a small arrow pointing upwards - how can i change the colour of this to the same colour as the background on the sub menu (#eeeeee)
and 1 more thing :)
When you hover over a link and the sub menu displays, the top and bottom of the sub menu appear about 1-2 seconds after the rest of it for some reason
Help would be much appreciated :)
thanks
#cssmenu > ul > li.active {
/* Add styles for currently "active" list items here */
}
If you want the down arrow to have the same background as it's parent you can use the inherit rule on the background property, as so:
#myArrow {
background-color: inherit; /* Will inherit from parent */
}
i have a CSS menu with this CSS Code:
#cssmenu ul { margin: 0; padding: 0; text-align: center; }
#cssmenu li { margin: 0; padding: 0;}
#cssmenu a { margin: 0; padding: 0;}
#cssmenu ul {list-style: none;}
#cssmenu a {text-decoration: none;}
#cssmenu {height: 50px; background-color: #f36f25; box-shadow: 0px 2px 3px rgba(0,0,0,.4);}
#cssmenu > ul > li {
display: inline-block;
margin-left: 15px;
position: relative;
}
#cssmenu > ul > li > a {
color: #ffffff;
font-size: 15px;
line-height: 50px;
padding: 16px 20px;
-webkit-transition: color .15s;
-moz-transition: color .15s;
-o-transition: color .15s;
transition: color .15s;
}
#cssmenu > ul > li > a:hover {color: #ffffff; background-color:#666666; }
#cssmenu > ul > li > ul {
opacity: 0;
visibility: hidden;
padding: 16px 0 20px 0;
background-color: #eeeeee;
text-align: left;
position: absolute;
top: 30px;
left: 50%;
margin-left: -90px;
width: 180px;
-webkit-transition: all .3s .1s;
-moz-transition: all .3s .1s;
-o-transition: all .3s .1s;
transition: all .3s .1s;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
-moz-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
box-shadow: 0px 1px 3px rgba(0,0,0,.4);
}
#cssmenu > ul > li:hover > ul {
opacity: 1;
top: 50px;
visibility: visible;
}
#cssmenu > ul > li > ul:before{
content: '';
display: block;
border-color: transparent transparent rgb(250,250,250) transparent;
border-style: solid;
border-width: 10px;
position: absolute;
top: -20px;
left: 50%;
margin-left: -10px;
}
#cssmenu > ul ul > li { position: relative;}
#cssmenu ul ul a{
color: #000000;
font-size: 13px;
background-color: #eeeeee;
padding: 5px 8px 7px 16px;
display: block;
-webkit-transition: background-color .1s;
-moz-transition: background-color .1s;
-o-transition: background-color .1s;
transition: background-color .1s;
}
#cssmenu ul ul a:hover {background-color: #f36f25;}
#cssmenu ul ul ul {
visibility: hidden;
opacity: 0;
position: absolute;
top: -16px;
left: 206px;
padding: 16px 0 20px 0;
background-color: #eeeeee;
text-align: left;
width: 160px;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
-moz-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
box-shadow: 0px 1px 3px rgba(0,0,0,.4);
}
#cssmenu ul ul > li:hover > ul { opacity: 1; left: 196px; visibility: visible;}
#cssmenu ul ul a:hover{
background-color: #f36f25;
color: rgb(240,240,240);
}
There is a slider underneath the nav code but the sub menus on the navigation are displaying behind the images on the slider, any ideas what i can do to get them to display in front of the slider images?
JS Fiddle of the menu is here: http://jsfiddle.net/JLRte/
Add a z-index to the menu: #cssmenu *{ z-index: 999 } Fiddle: http://jsfiddle.net/JLRte/1/
i have this CSS Code for my nav menu:
#cssmenu ul { margin: 0; padding: 0;}
#cssmenu li { margin: 0; padding: 0;}
#cssmenu a { margin: 0; padding: 0;}
#cssmenu ul {list-style: none;}
#cssmenu a {text-decoration: none;}
#cssmenu {height: 50px; background-color: #f36f25; box-shadow: 0px 2px 3px rgba(0,0,0,.4);}
#cssmenu > ul > li {
float: left;
margin-left: 15px;
position: relative;
}
#cssmenu > ul > li > a {
color: #ffffff;
font-size: 15px;
line-height: 50px;
padding: 5px 20px;
-webkit-transition: color .15s;
-moz-transition: color .15s;
-o-transition: color .15s;
transition: color .15s;
}
#cssmenu > ul > li > a:hover {color: #666666; }
#cssmenu > ul > li > ul {
opacity: 0;
visibility: hidden;
padding: 16px 0 20px 0;
background-color: #eeeeee;
text-align: left;
position: absolute;
top: 30px;
left: 50%;
margin-left: -90px;
width: 180px;
-webkit-transition: all .3s .1s;
-moz-transition: all .3s .1s;
-o-transition: all .3s .1s;
transition: all .3s .1s;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
-moz-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
box-shadow: 0px 1px 3px rgba(0,0,0,.4);
}
#cssmenu > ul > li:hover > ul {
opacity: 1;
top: 65px;
visibility: visible;
}
#cssmenu > ul > li > ul:before{
content: '';
display: block;
border-color: transparent transparent rgb(250,250,250) transparent;
border-style: solid;
border-width: 10px;
position: absolute;
top: -20px;
left: 50%;
margin-left: -10px;
}
#cssmenu > ul ul > li { position: relative;}
#cssmenu ul ul a{
color: #000000;
font-size: 13px;
background-color: #eeeeee;
padding: 5px 8px 7px 16px;
display: block;
-webkit-transition: background-color .1s;
-moz-transition: background-color .1s;
-o-transition: background-color .1s;
transition: background-color .1s;
}
#cssmenu ul ul a:hover {background-color: #f36f25;}
#cssmenu ul ul ul {
visibility: hidden;
opacity: 0;
position: absolute;
top: -16px;
left: 206px;
padding: 16px 0 20px 0;
background-color: #eeeeee;
text-align: left;
width: 160px;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
-moz-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
box-shadow: 0px 1px 3px rgba(0,0,0,.4);
}
#cssmenu ul ul > li:hover > ul { opacity: 1; left: 196px; visibility: visible;}
#cssmenu ul ul a:hover{
background-color: #f36f25;
color: rgb(240,240,240);
}
i need to make the sub menu box move up a little more so you can see the small arrow on top on the orange part of the menu (main bit) and also make it full page width as it is but make the links/text centred on the page
here is a fiddle: http://jsfiddle.net/dQnjt/
any ideas?
Use display: inline-block instead of float and add text-align: center to the parent ul:
#cssmenu ul { margin: 0; padding: 0; text-align: center; }
#cssmenu > ul > li {
display: inline-block;
margin-left: 15px;
position: relative;
}
And just reduce the top value on hover:
#cssmenu > ul > li:hover > ul {
opacity: 1;
top: 55px;
visibility: visible;
}
http://jsfiddle.net/dQnjt/1/
You can just add ul:display:table; margin:0 auto;, this will center the floated elements in it.
I have added a Position: relative to the the following:
#cssmenu > ul > li > ul {
opacity: 0;
visibility: hidden;
padding: 16px 0 20px 0;
background-color: #eeeeee;
text-align: left;
position: relative;
left: 50%;
margin-left: -90px;
width: 180px;
-webkit-transition: all .3s .1s;
-moz-transition: all .3s .1s;
-o-transition: all .3s .1s;
transition: all .3s .1s;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
-moz-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
box-shadow: 0px 1px 3px rgba(0,0,0,.4);
}
#cssmenu > ul > li:hover > ul {
opacity: 1;
top: 0px;
visibility: visible;
position:relative;
}
http://jsfiddle.net/dQnjt/5/