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
Related
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.
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;
}
I have a Superfish menu that, when I hover over it and the sub-menu comes into view, I wish to keep a certain background-color for the selected option.
I have written this, however, it doesn't seem to apply:
.sf-menu ul li:hover > a {background-color: #da2026;}
Would it work if I targeted the element itself and used a < arrow to work backwards?
This could be a good place to start
.sf-menu li li a:hover, .sf-menu li.sfHover li a:hover {
background-color: #da2026;
}
or maybe just
.sf-menu li li.sfHover a{
background-color: #da2026;
}
my problem is rather simply explained, but I just cannot find the answer using firebug etc....
Why are my submenu items overlapping? Hover over "Aktuelles" and you can see that the transparent submenu items overlap, creating ugly white bars. The ul li elements have no minus margins assigned to them, so why are they doing it?
Thanks!
It's because you are giving .main-navigation li a fixed height. Line 946 in style.css. Remove the height. Also the box-shadow on .main-navigation li ul li a might cause some ugly design. You'd better apply the shadow on .main-navigation li ul.
The line-height of a <a> is higher than it's parent <li>.
Set the line-height in the following classes to equal values:
.main-navigation li ul li a
.main-navigation li
You have this css class:
.main-navigation li ul li a:hover {
background: #e3e3e3;
color: #444;
}
Change it like this:
.main-navigation li ul li a:hover {
background: #e3e3e3;
color: #444;
opacity: 0.75;
}
#Bram Vanroy answer is the way to go...
Also try this code
.sub-menu li {
margin: 0;
}
Because .main-navigation li style affects all the li in that menu, so this margin: 0 2.857142857rem 0 0 is making the .sub-menu li to have an ugly margin-right
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.