I tried to write font-size in css of nav li ul but it didnt change the font size.
I only want dropdown submenus to have smaller text size than regular links how do i do that?
Here is Jsfiddle http://jsfiddle.net/N2Ert/1/
<li>Projelerimiz
<ul>
<li>Submenu1</li>
<li>Submenu2</li>
</ul>
</li>
.nav li ul {
display:none;
position:absolute;
min-width:20px;
margin-left:50px;
margin-top:-35px;
}
You just need to add this css code:
.nav li:hover > ul li a{
font-size: 10px;
}
Demo Link
Related
I've created a rollover image menu in Dreamweaver. The days of the week are images. So is the rollover image that appears on hover. My problem is when you hover over the days of the week, the hover image pushes the text down.
I've mocked together two screen grabs showing the menu before and during it's hover (http://static.tumblr.com/2wdsnoc/FbPmx6mez/hover-example.png)
I read about z-indexes and tried making the menu have a greater number than the hover but that hasn't worked, nor did it help making the position fixed. In the end this is the only CSS I have styling the menu -
== CSS ==
#nav {
text-align:center;
list-style: none;
}
#nav ul
{
list-style-type:none;
}
#nav li
{
display:inline;
text-decoration:none;
}
Here is the JSfiddle with the full javascript, html and css I've shown just one category for ease.
Thank you in advance!!
Using Javacript is overkill for what you're trying to accomplish, just use a sprite image, and manage the rest via CSS
JSFiddle Demo
HTML:
<ul>
<li class="home">Home</li>
</ul>
CSS
ul { float:left}
ul li { float:left; list-style:none; }
ul a { display:block; text-indent:-9999em; }
ul li.home { width:100px; height:50px; }
ul li.home a { background:url(http://placehold.it/100x100) no-repeat 0 0 }
ul li.home a:hover { background-position:0 -50px; }
Try this http://jsfiddle.net/r2FF7/18/
#nav li a img{
vertical-align:bottom;
}
Full page on: http://jsfiddle.net/r2FF7/18/show/
I have worked on a new menu for my site, but I cannot seem to arrange for space between the links vertically (I want more white space between links) Any advice?
html
<ul class="menu">
<li>ABOUT</li>
<li>CONTACT</li>
<li>SERVICES</li>
</ul>
css
ul.menu
{
list-style-type:none;
list-style-position: inside;
margin:0;
padding:0;
padding-bottom: 1cm;
}
.menu li a, .menu li a:visited
{
padding:12px 0 0 0px;
font-family: 'Roboto Condensed', sans-serif;font-size:20px;font-weight:700;
color:#FFFFFF;
background-color:#09F;
text-align:center;
padding:3px;
text-decoration:none;
}
.menu li a:hover, menu li a:active {
background-color:#666;
}
As you can see I have attempted the gaps with a piece of css: {padding:12px 0 0 0px;} but no luck.... everything else works fine - see fiddle # http://jsfiddle.net/DCxvy/
Anchors are by default inline elements. To add certain padding values, you need to render them as inline block-level elements. Add display: block to your anchor styles:
.menu li a { display: inline-block }
Also, you should note that your .menu li a style has two entries for padding. The latter one (setting padding to 3px on all sides) is overriding your earlier definition.
Here's a jsFiddle demo.
If I'm not wrong, you want to insert space vertically between links.
For that, all you have to do is:
.menu li {
margin-bottom: 10px;
}
fiddle with the margin solution.
On the other hand, if you want the background of your menu to remain the shade of blue it is and have the colour change on hover then here is the fiddle for that.
I have also refactored your css to arrange rules in a more intuitive manner.
fiddle with the menu background as a solid colour without white line breaks.
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 have a menu using pure CSS, hover a parent li item display the the nested list. A simplified example:
<ul id="menu-top" >
<li class="menu-item">
Forums
<ul class="sub-menu">
<li>Register</li>
<li>Activate</li>
<li>Members</li>
</ul>
</li>
</ul>
The css:
.navigation ul.menu li:hover { background: #ccc} //hover the parent item changes it bg color
.navigation ul.sub-menu li {
display:none;
}
.navigation ul li:hover > ul.sub-menu li { display: block; }
It works ok, but I'm trying to add an "persistent" effect, I want keep the parent style set when hovering also the sub-item.
I tried this but can't get working:
.navigation ul.sub-menu li:hover > .navigation ul.menu li { background: #ccc}
I don't know if this is possible without javscript or else, also can't find anything about using ">" in CSS.
THanks for any help
:hover is triggered on all ancestors of the element that is being hovered over, so .navigation ul.menu li:hover { background: #ccc; } should work just fine.
Alternatively, someday we should be able to use :has().
.menu-item:hover {
background-color:#ccc;
}
.sub-menu li:hover {
background-color:#666;
}
I have a menu:
<div class="headerMenu">
<ul>
<li>Home <span>Home Page<span></li>
<li>About <span>About My Website<span></li>
<li>Contact <span>Get in touch<span></a></li>
</ul>
</div>
My current CSS is as follow:
.headerMenu{
width: 100%;
}
.headerMenu ul{
margin: 0;
padding: 0;
float: left;
}
.headerMenu ul li{
display: inline;
}
.headerMenu ul li a{
float: left;
color: white;
padding-top:25px;
padding-left:50px;
font-size:24pt;
}
.headerMenu ul li a:visited{
color: white;
}
.headerMenu ul li a:hover, .menu ul li .current{
color: #fff;
background: url(../../Content/Images/menu-selector.png) repeat-x; /* 25x10 arrow/*
}
And now for the question:
How can i get the content in the span tag to be below the Main text.
When i hover over the anchor, How do i add the hover image as shown in screen shot
The Mockup i created in Photoshop looks like this:
I know this would be easily achievable by making use of images, but my solution requires that menu to be created dynamically.
1) How can i get the content in the span tag to be below the Main text.
You need to use display: block on the span to have it appear on a new line:
.headerMenu ul li a span {
display: block;
}
2) When i hover over the anchor, How do i add the hover image as shown in screen shot
Try to center the arrow to the top. This might work:
.headerMenu ul li a:hover, .menu ul li .current {
color: #fff;
background: url(../../Content/Images/menu-selector.png) no-repeat center top;
display:block;
/* also make sure that you use display block with correct height
so that you can positionate the arrow on the correct place... */
}
Add the following code for problem 1:
.headerMenu ul li a span {
display: block;
}
This sets the <span> to display as a block level element, therefore occupying the full parent container width by default.
For problem 2, there are multiple ways to do this. However, my suggestion would be to add the array to the <li> and use the :hover pseudo class. Note: that this will only work in IE for 7+.
.menu ul li:hover{
background: url(../../Content/Images/menu-selector.png) repeat-x;
}
See it in action - http://jsfiddle.net/kxqx8/1/ (I changed the colors to help display)