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; */
}
Related
Please see below,
The border should only appear on hovered <a> tags, however it appears on all <a> tags within the nested
HTML
<ul><li>Home</li>
<li><a href='#'>About</a></li>
<li>
<a href='#'>Portfolio</a>
<ul>
<li><a href='#'>Web Design</a></li>
<li><a>Web Development</a></li>
<li><a>Illustrations</a></li>
</ul>
</li>
<li>Blog</li>
<li>Contact</li>
</ul>
CSS
body {
font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
padding: 20px 50px 150px;
font-size: 13px;
text-align: center;
background: #E3CAA1;
}
ul {
text-align: left;
display: inline;
margin: 0;
padding: 15px 4px 17px 0;
list-style: none;
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
ul li {
font: bold 12px/18px sans-serif;
display: inline-block;
margin-right: -4px;
position: relative;
padding: 15px 20px;
background: #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;
}
ul li:hover {
background: #555;
color: #fff;
}
ul li:hover a {
border: 1px solid red;
}
ul li ul {
padding: 0;
position: absolute;
top: 48px;
left: 0;
width: 150px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
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;
}
ul li ul li {
background: #555;
display: block;
color: #fff;
text-shadow: 0 -1px 0 #000;
}
ul li ul li:hover { background: #666; }
ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
Change hover link to the below.
ul li li:hover a {
border: 1px solid red;
}
Try this:
ul li:hover > a {
border: 1px solid red;
}
">" means that we make the relationship only with the immediate child, and not the nested ones.
If you want to have borders only around the hovered , then replace the code
ul li:hover a {
border: 1px solid red;
}
with
ul li a:hover {
border: 1px solid red;
}
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;
}
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/