i making a navigation with wordpress. i want to make a navigation like this
http://www.technikonus.lt/en (vertical navigation in the left). there are parent and submenu items...
I do not know what I have a problem. With css or should I change something in wordpress menu walker.
That's what I get now: Its ok with parent items
But with sub-items i have a trouble because dont know how to align li items when appears sub-menu items:
<li>
<ul><li></li></ul>
</li>
so this is how looks like my menu now http://jsfiddle.net/Yu8fg/
DEMO
CSS
.menu li {
background: url('img/li_bullet.png') 16px no-repeat;
list-style: none;
border-bottom: 2px solid #e6e6e6;
width: 190px;
display: block;
}
.menu > li{
padding-left: 32px;
}
as css inherits by children from parent so padding-left: 32px; was applying to submneu li as well so by using ">" selector we have limited it apllication only to .menu li and wont apply to submenu li
Related
My Dropdown-Menu Background only appears when hovering over the Dropdown sites, but I want it to appear all the time.
My Site is: http://bellezza-ribelle.blogspot.de/
There are Dropdowns on "Meine Bücher", "Rezensionen" and "Challenges" but the background only shows on the first Dropdown-Tabs, which makes it difficult the read the other ones, if you don't hover over them.
How can I make the Background appear on the drop-down-tabs with only hovering over die "Main"-Tabs (Meine Bücher, etc.)?
Add this to your CSS:
#nav1 ul ul li {
background-color: #f3f3f3;
}
You can also have more "air" by using padding for the li:
#nav1 ul ul li {
background-color: #f3f3f3;
padding-right: 20px;
padding-left: 20px;
padding-bottom: 10px;
}
Looks like you might have a little issue with your max-height # .tabs-inner .widget ul on Line 255. Maybe setup a different max-height on :hover?
I'm trying to style my wordpress sub-menu with CSS to show only when a user hovers the "Color" menu item but I haven't succeed so I need some help please.
Here's how my menu looks like at this state:
The sub-menu shows all the time and there is a weird space after the "Color" menu item. Also, the sub-menu items are displayed one after another and not one below other like a drop-down menu should be.
Could you please help me out?
I'm aware that there are some similar questions to this one but they were of no help.
EDIT: added current CSS menu code that I have in my style.css
nav.main { float: left; }
nav.main li { float: left; margin-right: 11px; }
nav.main li.last-child { margin-right: 0; }
nav.main li a {
color: #7A0018;
display: block;
font-size: 13px;
padding: 50px 7px 22px 7px;
text-decoration: none;
}
nav.main li a:hover { background: #fbf6dc; }
nav.main li.current-menu-item a { background: #fbf6dc; }
where is css for your child list items ? you haven't use display property for those sub-menu which should be done none first then only on hovering them you have to change display property 'block'.
You have given margin-right property 11px; where as ul on default also occupies some margin.
Can you also provide your html frame (code)?
I'm designing a navigation menu for a website.
The menu must have rounded corners, I've done this using 'border-radius'.
I've set the width as 800px as that's the rough width the menu needs to be, if I remove the width or put width: auto the width goes to 100%.
There is a gap before the first button and after the last button in my navigation menu and what I need to get rid of this gap without losing the curved edges.
How can I make the first and last buttons maintain rounded outside corners and remove the gap between each side of the navigation.
CSS:
/* CSS MENU */
#menu {
/* DISPLAY SETTINGS */
text-align: center;
height: 40px;
width: 800px;
margin: 0;
padding: 0;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
/* APPEARANCE SETTINGS */
border-top: 2px solid #356AA0;
border-left: 2px solid #356AA0;
border-bottom: 2px solid #204061;
border-right: 2px solid #204061;
background: #628ddb;
/* FONT SETTINGS */
color: #15387a;
font-family: Arial, sans-serif;
font-weight: bold;
text-transform: uppercase;
font-size: 12px;
}
/* LIST SETTINGS */
#menu li {
display: inline-block;
}
/* HYPERLINK SETTINGS */
#menu li a {
text-decoration: none;
display: block;
padding: 0 15px;
line-height: 40px;
}
/* HOVER AND ACTIVE BUTTON SETTINGS */
#menu li a:hover, #menu li.active a {
color: #15387a; background: #3D7BBB; border-bottom: 2px solid #204061
}
HTML
<ul id="menu">
<li class="active end">Home</li>
<li>Our Services</li>
<li>Testimonials</li>
<li>Get A Quote</li>
<li>Drive For Us</li>
<li>Terms & Conditions</li>
<li class="end">Contact Us</li>
</ul>
So there are several things that need to happen in order to maintain your design:
1.) The UL tag needs to have display: table
2.) Like what #Netsurfer You'll need to set the LI to have display: table-cell so that the list items flush to the edges
3.) Now that UL has rounded corners, any child elements with squared corners will stick out. You can either:
a.) Resolve this by applying overflow: hidden to both the UL and LI or
b.) Apply the rounded corners to the LI and A tags.
4.) Your :hover & active state applies a bottom border -- the table-cell will cause this to look strange. It might be better to remove it altogether.
You can check out the code here: http://jsfiddle.net/vuAVV/
Remove text-align: center; from #menu.
You might also want to include padding-left: 10px; to make sure when the first link is highlighted it does not overlap with the rounded corner of the menu.
See this working jsFiddle.
Change the display setting for the LIs to display: table-cell.
By doing so you are also not "trapped" by the white-space issues when using display: inline-block.
See jsFiddle
PS: Forgot the rounded corners ..., now also included. ;-)
The theme I am working with allows for a description (entered in menu description) under the main menu items. I was able to align the main nav items center without a problem, but I'm trying to align the descriptions under to match with no luck. Because the items all have different character lengths this isn't something I am able to solve with padding adjustments.
Here is the navigation: http://screencast.com/t/F7h1Sp0tk
The CSS exists in two areas, but I will happily pastebin both in full if or anything else needed.
Thank you very much.
Description:
span.descmenu {
font-size:12px;
color:#989797;
padding: 0.85em 40px 0.7em 25px;
Main nav:
/*Top level menu link items style*/
.jqueryslidemenu ul li a{
display:block;
width:80px;
padding:4px 15px;
text-decoration: none;
line-height: 10px;
outline: none;
text-align:center;
font-size: 12px;
color:#7c7c7c;
Have you tried margin:auto 0; or text-align:center; for span.descmenu?
I'm creating a horizontal menu in my website and everything is OK but one thing. I have a link in each <li> and the color is set to white and li has no background, but in hover I want to set li background to white and links text color to black. The problem is that the width of <a> tags is not the same as <li> and when the mouse is over the part that is in <li> but not in <a> both become white.Anchor links can not have width property as far as I know, and I try different type of tricks but no success.Any idea?
#primary-menu ul li {
list-style-type: none;
float: left;
background-image: url('menu-sep.png');
background-repeat: no-repeat;
background-position: right;
}
#primary-menu li a:hover {
color: black;
}
#primary-menu li:hover {
background-color: white;
color: black;
}
#primary-menu li a {
color: white;
text-decoration: none;
padding-right: 8px;
margin-right: 8px;
width: 100%;
height: 23px;
}
`
Check your <li> styling. They probably have padding. Remove it and the anchors should occupy the entire available space. Also, change the margin on the <a> tag to padding. Padding counts as part of the tag (ie, hovering over the padding makes it trigger the :hover pseudoselector), while margins do not.
as you have written above that should be worked but you are saying that is not working then try by making class refered to only text like.
.liText
{
color:white;
}
.liText:hover
{
color:black;
}
hope this will work.
use class attribute with your tag.
like
<a class="liText"> // for single class
if you want to use two or more classes for one tag then use another class after giving space as i mentioned below.
<a class="firstClass SecClass ThirdClass">