I have a main menu that i have styled with an underline appearing on the hover state.
However I don't want this to appear on the submenu categories.
This is my code:
#menu_container { padding: 0px 0; text-align: center; }
#menu_container a:hover{background: url("/main/nav.gif") repeat-x scroll 0px 20px transparent;}
#menu_container ul { list-style-type: none; margin: 0; padding: 0; text-align: center; }
#menu_container ul li { margin-left: 15px; font-family: 'Lato', sans-serif; font-weight: 900; font-size: 1.2em; color: #000; position: relative; padding-bottom: 10px; text-transform: uppercase; display: inline-block; letter-spacing:1px; }
#menu_container ul li:first-child { margin-left: 0; }
#menu_container ul li a { color: #000; text-decoration: none; display:inline-block; padding-bottom: 5px; padding:10px; border-radius: 0px;}
#menu_container ul li a:hover { color: #000; -webkit-transition: background 0.5sease;-moz-transition: background 0.5sease;-ms-transition: background 0.5sease;-o-transition: background 0.5sease;transition: background 0.5sease;}
#menu_container ul li.current-menu-item a,
#menu_container ul li.current_page_item a { color: #b9b9b9;}
#menu_container ul li ul { position: absolute; top: 35px; left: 0; padding: 1px 1px; z-index: 25; display: none; border-radius: 3px; text-align: left; }
I think you're asking for this:
#menu_container ul li a { text-decoration: none; ...}
#menu_container ul li a:hover { text-decoration: underline; ... }
#menu_container ul li li a:hover { text-decoration: none; ... } /* no hover underline on sublinks */
The underlying idea is selector specificity. A specific contextual selector (#menu_container ul li li a) overwrites a more generic definition (#menu_container ul li a).
See CSS priority scheme:
http://en.wikipedia.org/wiki/Cascading_Style_Sheets#CSS_Priority_scheme_.28highest_to_lowest.29
Related
I have used text-align: center inside, but .main-nav was not effected. What is the best way to center this navigation?
/***** Navigation *****/
.main-nav { font-family: 'Lato', Helvetica, Arial, sans-serif; font-weight: 900; text-transform: uppercase; }
.main-nav li { float: left; position: relative; }
.main-nav li a { display: block; color: #333131; font-size: 16px; font-size: 1rem; line-height: 1; letter-spacing: 2.7px; padding: 12px 0; margin-right: 30px; }
.main-nav li a:hover { color: #000; }
.main-nav ul li a, .main-nav ul .current-menu-item:hover > a { border-bottom: 2px solid #fff; }
.main-nav ul .current-menu-item > a { border-bottom: 2px solid red; color: #000; }
.main-nav ul ul li a, .main-nav ul ul .current-menu-item:hover > a, .main-nav ul ul .current-menu-item > a { border: none; }
.main-nav ul li:hover > ul { display: block; background: #fff; z-index: 9999; }
.main-nav ul ul { display: none; position: absolute; left: -20px; }
.main-nav ul ul li { padding: 0 20px; width: 13rem; background: #f6f6f6; }
.main-nav ul ul ul { left: 100%; top: 0; }
Your nav container should have below property to make it center: I have not tested. if you want exact solution create fiddler or share HTML code as well.
.navContainer{
width:100px; <!-- This value can be any -->
margin: 10px auto; <!-- first value of margin can be any -->
}
Hi I am having trouble shifting a menu list on my wordpress site to the left. It appears as if there is a margin so when the list contains so many items it appears right offset and no longer centred. The site in question is www.cabinboys.ca the menu I'm talking about is right below the cabinboys image filled with two letter items. If any one could look at my css and see if they could figure out how to shift the list items to the left that would be much appreciated thanks.
/* =Menu
----------------------------------------------- */
#menu {
border-bottom: 1px solid #ddd;
border-top: 1px solid #ddd;
margin-bottom: 25px;
padding: 10px;
text-align: right;
width: 800px;
}
#menu img {
margin-bottom: 10px;
}
#menu a {
color: #666;
font-family: 'Oswald', Helvetica, Arial, sans-serif;
font-size: 18px;
margin: 0 10px;
text-decoration: none;
text-transform: uppercase;
}
#menu a:hover {
color: #36bcab;
}
#menu ul {
list-style: none;
margin: 0;
padding-left: 30;
}
#menu li {
float: right;
position: relative;
}
#menu ul ul {
display: none;
float: right;
position: absolute;
right: 0;
z-index: 99999;
}
#menu ul ul ul {
right: 100%;
top: 0;
}
#menu ul ul a {
background: #e9e9e9;
border-bottom: 1px solid #e1e1e1;
display: block;
font-size: 14px;
height: auto;
line-height: 1em;
margin: 0 ;
padding: .8em .5em .8em 1em;
width: 130px;
}
#menu ul ul li:last-of-type a {
border-bottom: none;
}
#menu li:hover > a,
#menu ul ul :hover > a {
color: #36bcab;
}
#menu ul ul a:hover {
background: #36bcab;
}
#menu ul li:hover > ul {
display: block;
}
#menu ul li.current_page_item > a,
#menu ul li.current_page_ancestor > a,
#menu ul li.current-menu-item > a {
color: #111;
}
#menu ul:after {
clear: both;
content: ' ';
display: block;
}
You should add a couple of properties to make it work:
#menu-header-menu {
display:table;
margin:0 auto;
padding:0;
}
Nevertheless it's interesting that you say that the shift happened when the number if items in the menu increased, I don't see in the CSS any code that could differentiate the display depending on the number of items. Could you confirm that I understood the situation?
I've created a drop down menu using css where the drop down appears as a horizontal row instead of a vertical list. My only problem is that the drop down menu does not line up with the rest of menu. I want it to be flush with the left side of the navigation bar.
The page is up at this address: http://concept82.com/CBHweb/index2.html
The code for my drop down menu is:
#navholder{
background-color: #594361;
margin: 0 auto;
width: 868px;
height: 25px;
font-family: P22, Helvetica, Arial, sans-serif;
}
#nav {
margin: 1px;
padding: 0px;
}
#nav li {
list-style: none;
float: left;
}
#nav li a {
display: block;
color: #FFFFFF;
font-size: 14px;
text-align: center;
margin-top: 5px;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 3px;
width: 140px;
}
#nav li a:hover {
color: #201E30;
}
#nav li ul {
display: none;
}
#nav li ul a{
width: auto;
font-size: 11px;
}
#nav li:hover ul, #nav li.hover ul {
position: absolute;
left: 0;
display: inline;
padding-top: 5px;
}
#nav li:hover li, #nav li.hover li {
float: left;
display: block;
text-decoration: none;
color: #594361;
font-size: 11px;
border-right: 1px solid #594361;
padding: 0px 15px 0px 15px;
margin-top: 3px;
margin-bottom: 3px;
white-space: nowrap;
}
#nav li.first, #nav li.hover li.first {
float: left;
display: block;
text-decoration: none;
color: #594361;
font-size: 11px;
border-left: 1px solid #594361;
padding: 2px 15px 2px 5px;
margin-top: 3px;
white-space: nowrap;
}
#nav li:hover li a, #nav li.hover li a {
color: #201E30;
background-color: #FFFFFF;
}
#nav li li a:hover {
color: #201E30;
}
Thanks ahead of time!
You should change position of #navholder as relative.
#navholder{
position: relative;
background-color: #594361;
margin: 0 auto;
width: 868px;
height: 25px;
font-family: P22, Helvetica, Arial, sans-serif;
}
When you define the ul when hovering on the list you specify left as 0 px, aligining it to the left of the page, change it to your margin width then it will be in the right place
#nav li:hover ul, #nav li.hover ul {
position: absolute;
left: 0;
display: inline;
padding-top: 5px;
}
I can't get the color of my dropdown items white, someone knows how I can fix this?
My normal links needs to be black, the not active ones needs to be black, the active one needs to be white, the dropdown items needs to be white. I've got it all with that code except for the most up dropdown item.
Heres my css:
.menuitems{
line-height: 240%;
text-transform: uppercase;
}
.menuitems ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
}
.menuitems ul li {
display: block;
position: relative;
float: left;
}
.menuitems li ul {
display: none;
}
.menuitems ul li a {
height: 40px;
display: block;
text-decoration: none;
color: black;
border-left: 1px #D0D0D0 solid;
padding: 0px 30px 0px 30px;
}
.menuitems li > ul li a
{
color:white;
}
.menuitems ul ul li{
text-transform: none;
border-bottom: 1px #ff5c38 solid;
line-height: 380%;
}
.menuitems ul li:hover{
background: url('images/menu-background1.png') repeat-x 0 0;
}
.menuitems ul li a:hover {
height:40px;
color: white;
padding-left: 30px !important;
padding-right: 30px !important;
}
.menuitems li:hover ul {
display: block;
position: absolute;
}
.menuitems li:hover li {
float: none;
font-size: 13px;
background: #fa3423;
}
.menuitems li:hover a { }
.menuitems li:hover li a:hover {
}
/* What to do on active */
.menuitems ul li.current_page_item {
background: url('images/menu-background1.png') repeat-x 0 0;
}
.menuitems ul li.current_page_item a{
color: white;
}
.menuitems li.current_page_parent a {
color: white;
}
.menuitems li.current_page_parent {
color: white;
background: url('images/menu-background1.png') repeat-x 0 0;
}
.menuitems li:hover ul:hover a:hover{
color: white !important;
}
.menuitems ul li ul{
color: white;
}
I tried everything.. :(
Castra, I assume you're talking about the text? If you want the text to always be white, you'll need to change color: black; in .menuitems ul li a to color: white;
Here's a JSFiddle that shows it.
So I'm working on a drop menu and I'd like each menu item to have an auto width. i.e. the background to expand to the width of the menu item rather than having an overall fixed width for all the UL. I thought that giving the ul li an auto width would sort it but it seems not. What am I missing?
<ul id="nav">
<li><a class="last" href="#">MENU ▼</a>
<ul>
<li>Short</li>
<li>Very Long</li>
</ul>
</li>
#nav {
height: 1;
list-style-type: none;
padding-top: 1.25em;
margin-top: 0em;
}
#nav li {
float: right;
position: relative; padding: 0;
}
#nav li a {
display: block;
font-size: 14px;
padding: 0 1em;
margin-bottom: 1em;
color: #333;
text-decoration: none;
border-left: 1px solid #333;
}
#nav .last, #nav li ul li a {
border-left: none;
}
#nav li a:hover, #nav li a:focus {
color: #666;
}
#nav li ul {
opacity: 0;
position: absolute;
right: 0em;
list-style-type: none;
padding: 0; margin: 0;
}
#nav li:hover ul {
opacity: 1;
}
#nav li ul li {
float: none;
position: static;
width: auto;
height: 0;
line-height: 0;
background: none;
text-align: right;
margin-bottom: .75em;
}
#nav li:hover ul li {
height: 25px;
line-height: 2.5em;
}
#nav li ul li a {
background: #222;
}
#nav li ul li a:hover {
color: #666;
}
Your #nav li style is being applied to all child li elements, so you need to use the ">", which selects only the immediate child.
Here is updated CSS which fixes the problem. I also commented out some other CSS that was interfering:
#nav {
height: 1;
list-style-type: none;
padding-top: 1.25em;
margin-top: 0em;
}
#nav > li { /* Added ">" */
float: right;
position: relative;
padding: 0;
}
#nav li a {
display: inline-block; /* was block */
font-size: 14px;
padding: 0 1em;
margin-bottom: 1em;
color: #333;
text-decoration: none;
border-left: 1px solid #333;
}
#nav .last, #nav li ul li a {
border-left: none;
}
#nav li a:hover, #nav li a:focus {
color: #666;
}
#nav li ul {
opacity: 0;
/*position: absolute;
right: 0em; */
list-style-type: none;
padding: 0; margin: 0;
}
#nav li:hover ul {
opacity: 1;
}
#nav li ul li {
/*float: none;
position: static;
width: auto;*/
height: 0;
line-height: 0;
background: none;
text-align: right;
margin-bottom: .75em;
}
#nav li:hover ul li {
height: 25px;
line-height: 2.5em;
}
You are using display: block for your links. That causes them to fill the available space. That's why they are all the same width. And float: right is contributing to the general narrowness. Use inline-block instead of block and prevent the link wrapping by using white-space: nowrap:
Demo: http://jsfiddle.net/neJty/2/