this is the first time I am creating a menu alone, I'm beginner and I just need to fix this problem to make my menu work correctly.
The second level menu is appearing out of position.
Sorry for my english I'm using google translator. :(
Code CSS:
http://www.agenciafibonacci.com/menu.css
Image:
http://www.agenciafibonacci.com/ilustra.jpg
Thanks!
I would suggest instead of using classes, configure your css like:
/* Main MENU (horizontal)*/
#menu ul {}
#menu ul li {}
/* Sub Menu (vertical) */
#menu ul li ul {}
#menu ul li ul li {}
/* Sub menu of sub menu (horizontal) */
#menu ul li ul li ul {}
#menu ul li ul li ul li {}
Not having seen your html, I cannot understand what class belongs to what.
Related
I am changing some parts of my WP site to RTL.
Everything is OK except for sub-menu items. when the cursor goes over a menu item, obviously some sub-menu item opens. Now my problem is with its direction of opening. In other words, I need sub-menu items be opened to left.
I tried a simple CSS code,
#nav {direction: rtl;}
Unfortunately this code is effective only regarding menu text direction.
Is there any CSS trick making sub-menus open to LEFT?
My domain address is http://sciself.com
Thanks
Shaqpad
Simply add text-align: left; to the selector:
#wrapper #nav ul li ul li a, #wrapper #sticky-nav ul li ul li a
FullCode:
#nav ul ul, #sticky-nav ul ul {
left: auto !important;
right: 0 !important;
}
#nav ul ul li:hover ul, #sticky-nav ul ul li:hover ul {
right: 170px !important;
left: auto !important;
}
Im trying to style the submenu on my wordpress menu
http://www.milknhny.co.uk/SofiaWork/
I tried
.headermenu ul ul
etc,... and it didnt work, can anyone suggest the correct class structure?
ive already tried
.headermenu ul li ul li also
thanks
Your ul's got an id attribute. Why not use it in css:
#menu-header-menu - I think it is the top-level menu.
#menu-header-menu .sub-menu - targets ALL sub menus of top-level menu.
Not sure what you are trying to customise, but the anchor text also has a background which does not help styling, so if you remove this it can help you style the list item better.
#headermenu ul ul li a {
background: none;
}
#headermenu ul ul li a:hover, ul.headermenu ul ul li:hover {
background: none;
}
Then use :
#headermenu ul ul li {
background: red ;
}
AND:
#headermenu ul ul li:hover {
background: yellow;
}
I'm trying to add a sub-menu to the css at http://jsfiddle.net/hozey/9dGuc/, but can't seem to get the hang of it. Could someone please help this newbie? Here's the html. I want to make a sub-menu for Horses 1, 2 and 3.
<div class="menu">
<ul>
<!--begin to insert contents-->
<li class="item-first">Home</li>
<li><a class="current">Portfolio ▼</a>
<ul>
<li>Horses 1</li>
<li>Horses 2</li>
<li>Horses 3</li>
<li>Dogs</li>
<li>People</li>
<li>Stills</li>
</ul>
</li>
<li>Order</li>
<li>Contact Me</li>
</ul>
</div> <!-- end menu -->
</div>
Here's the css I've got so far:
body {
margin: 0px;
}
#wrapper {
border: px solid black;
margin: 1em auto;
font-family: Arial,Helvetica,sans-serif;
width: 760px;
text-align: left;
background-color: #cccccc;
overflow:hidden;
height:150px;
}
.menu {font-family: arial, sans-serif;width:760px;position:relative;font-size:0.7em; margin:0px auto;}
.menu ul li a {display:block;
text-decoration:none;
width:97px;
height:25px;
text-align:center;
color:white;
padding-left:1x;
border:px solid;
border-width:0 0px 0px 0;
background:;
line-height:25px;
font-size:1.0em;}
.menu ul {padding:0;margin:0;list-style-type: none; }
.menu ul li {float:left;position:relative;}
.menu ul li ul {visibility:hidden;position:absolute;}
.menu ul li:hover a, .menu ul li a:hover {color:white;background:#3BA110;}
.menu ul li:hover ul, .menu ul li a:hover ul {visibility:visible;left:0;}
.menu ul li:hover ul li a, .menu ul li a:hover ul li a {display:block;
background:#444444;
color:white;
width:97px;
padding-left:1px;
border-right:none;}
.menu ul li:hover ul li a:hover, .menu ul li a:hover ul li a:hover {background:#3BA110;color:white;}
This will get you started, though it's far from perfect. As Zeta pointed out, without the child combinator, making a deeply nested menu is not only difficult, but it also results in bad code.
What you need to do is make sure you know exactly what each of your selectors is targeting. You want your second and third tier lis to behave differently, so you need to be certain that your selector for the second isn't also effecting the third.
Literally all that I did to solve your problem was apply the child combinator all over the place on the code you already had, as I knew you were writing code for first and second tier menu items. After that, I tacked on a simple selector to target third tier items and had a working menu.
Were I you, I'd go back through your code and make sure you know exactly what your selectors are targeting, then rewrite your CSS. It's not too hard to do, and it can result in surprisingly little code for very complex nested menus.
html (for just a third tier menu item)
...
<!-- the rest of the menu -->
<li>
Horses 1
<ul>
<li>Submenu1</li>
<li>Submenu2</li>
</ul>
</li>
<!-- the rest of the menu -->
...
css (for just the third tier)
.menu ul ul ul { visibility: hidden; position: absolute; top: 0; left: 97px; }
.menu ul ul li:hover ul { visibility: visible; background-color: #eee; }
And just for a few examples of how to select different tier menus and items:
css (to target the 'header items')
.menu > ul > li { }
css (to target the first dropdown)
.menu > ul > li > ul { }
css (to target the first dropdown items)
.menu > ul > li > ul > li { }
.menu ul ul > li { } /* This will also target submenu items */
.menu > ul > ul > li { }
css (to target the submenu to a dropdown item)
.menu > ul > li > ul > li > ul { }
.menu ul ul ul { }
css (to target the submenu item of a dropdown item)
.menu > ul > li > ul > li > ul > li { }
.menu ul ul ul li { }
What we can gather from the above code is that you don't want to stop doing using the child combinator until you're at the last tier of your menu. In general, menu ul[n] li, where I'm using pseudocode to represent n number of uls, will target any li deeper than n depth in your menu. So in your case, it's fine to use .menu ul ul ul li as the third tier is the last one. But you wouldn't want to use .menu ul ul li to write style that's meant just for the first dropdown, as that selector also targets the third, fourth, and so on depth as well.
Just for completeness, the bare minimum to get a working deeply nested menu is done by thinking like this:
You want anything after the first ul to start off as hidden. So you can do:
.menu ul ul { visibility: hidden; }
This hides any ul that is nested within another ul. So it hits all of our submenus. And it only applies to lists within our menu.
Then you want each submenu to be visible when you're hovering over its parent's link. We can handle all of our submenus with a single selector, I think:
.menu li:hover > ul { visibility: visible; }
That should be general enough to apply to every level of a menu. Reading right to left, we make the ul visible when we're hovering over an li that is its direct parent. And, like usual, this only applies to an li that is within our menu.
Of course, you could use a, too, if you wanted.
CSS Menus are a great time to think and learn about CSS efficiency. Once you have a working menu, see if you can optimize it! The tags I posted here might not be the quickest; I just thought of them off the top of my head. I'll leave it to you to find the best selectors to use.
And that's really the basics of complex nested CSS menus. Hope it helps.
I like the look of this menu
I can't figure out how to get a line below each of the drop down elements without it going all the way to the edge and looking like a table layout. I'm thinking padding needs to be added in somewhere, but I can't figure out where.
This is what I have so far.
Part II of this question is what code would I need to introduce to add a third level to this menu?
Remove the border-bottom from #centeredmenu ul ul li
Put it in #centeredmenu ul ul li a and add some margin-left and margin-right;
Move the left and right borders from #centeredmenu ul ul li a to #centeredmenu ul ul li and move the bottom border from #centeredmenu ul ul li to #centeredmenu ul ul li a
Add margin to #centeredmenu ul ul li a and then add a bottom border to #centeredmenu ul ul to fill the gaps on the last item.
I've updated your example here
I have ceated a dropdown menu using the following css
.menu li ul {display: none;}
.menu li:hover > ul {display: block;}
But the problem is whenever the menu dropsdown the content below shifts down. How can I prevent that.
You can prevent that by positioning the sub menu absolute.
.menu li ul {display: none; position: absolute; }
You also have to set
.menu { position: relative; }
as said in the comment by Tae. If you do not, the sub menu will probably set to the top left corner of the page.