I want to make simple list but have some problem. When i put some tekst in li element i want to set li width same like li text is..
And also I want when I hover over the li link, to change full li element background color,not just of A element..
This is my code..
#mid_left ul{
width:180px;
list-style:none;
font-family:Verdana Helvetica, arial, sans-serif; font-size:15px;
}
#mid_left li {
width:auto;
background-color:red;
margin:10px 0;
padding:5px;
}
#mid_left li a:hover{
background-color:blue;
}
Example what i try to do is on page..(see footer)
http://buildinternet.com/2010/07/when-to-use-_session-vs-_cookie/
Why don't you just use Firebug to read their CSS?
#mid_left li:hover{
background-color:blue;
}
should take care of your question.
Applies to the a element when you hover over the li.
#mid_left li:hover a{
background-color:blue;
}
Applies to the li element when you hover over it.
#mid_left li:hover{
background-color:blue;
width:200px;
}
Here is a working jsfiddle which (I believe) fits with what you're trying to do. Don't mind the colors, they're for illustration only.
http://jsfiddle.net/qwdd8/1/
edit: updated to remove inline-block, setting width:auto. I forced a height to the LI, but there may be better ways for keeping them from overlapping.
For the width-problem, don't set a width to the ul-element, so change:
#mid_left ul{
width:180px;
list-style:none;
font-family:Verdana Helvetica, arial, sans-serif; font-size:15px;
}
to
#mid_left ul{
list-style:none;
font-family:Verdana Helvetica, arial, sans-serif; font-size:15px;
}
Related
The image is pretty self explanatory. I can't get rid of those two pixels at the bottom of only one list element. I've inserted text-decoration:none and list-style-type none in every corner of the css with no results.
Reason?
http://s1089.photobucket.com/user/3Joez/media/disp_zps6fe2774c.jpg.html
#rightnav {
float:right;
width:65%;
height:50px;
/*border:2px solid #Df1;*/
}
#rightnav ul {
margin-left:9.5%;
/*border:1px solid #F30;*/
width:500px;
}
#rightnav ul li {
display:inline-block;
font-family:Times New Roman, Times, serif;
font-size:1.4em;
margin-left:2%;
margin-top:1.5%;
color:#FFF;
text-decoration:none ;
list-style:none;
list-style-type:none;
}
Pretty sure you have an <a> inside your <li>. Did you change the text decoration on that? Changing it on the <li> will probably not change the inner style because the UA CSS likely ties the underline style to the <a> tag.
#rightnav ul li a {
text-decoration:none;
}
i'm really new to html and css, and i thought having a project while working through tutorials would help me stay motivated while learning a lot.
i've been playing around with this menu, and it's almost there - but now there seems to be this wall and i just don't get how to get over it! i have searched for hours on several sites and am now ready to throw this thing outta the window...
here's a jsfiddle: http://jsfiddle.net/64Grv/
so what i wanted to achieve is that on hover of one submenu the whole menu changes color (instead of the hovered link now). if i hover on "more stuff" for example, all of "menupoint2, stuff, more stuff, even more stuff...." should change color.
how should i go with that? i've tried putting different classes, to no avail - i guess i put them at the wrong place. or is this possible with some kind of box?
i apologize for the messiness of my css (just a beginner messing around..), and i'd really appreciate it if somebody had concrete tips on how to do this :)
thank you very much!
CSS:
#navigation ul
{
margin:0px;
padding:0px;
position:relative;
text-align:center;
}
#navigation ul li
{
display:inline;
float:right;
line-height:20px;
list-style:none;
margin-right:3%;
margin-top:5%;
position:relative;
}
#navigation li a
{
display:block;
font-family: "Helvetica", "Arial", sans-serif;
font-size:1em;
color:#04B4AE;
text-decoration:none;
}
#navigation li a:hover
{
color:#08298A;
text-decoration:none;
}
#navigation li ul
{
font-size:0.8em;
background-color:transparent;
display:block;
margin:0px;
padding:0px;
top:0.5em;
}
#navigation li:hover ul
{
color:#04B4AE;
}
#navigation li li
{
vertical-align:middle;
list-style:none;
display:list-item;
margin:auto;
float:none;
}
#navigation li li a
{
color:#04B4AE;
text-decoration:none;
}
#navigation li li a:hover
{
color:#08298A;
text-decoration:none;
}
you need to set :hover on li :
http://jsfiddle.net/64Grv/1/
li:hover a {color:red}
Try
li:hover a
{
color:yellow;
}
Updated fiddle link is here just changed below
Replace below code
#navigation li a:hover
color:#08298A;
text-decoration:none;
}
with
#navigation li:hover a {
color:#08298A;
text-decoration:none;
}
What would be the best way to add an active class on this css for my menu?
.vertical-nav{
width:200px;
height:auto;
list-style:none;
float:left;
margin-right:40px;
}
.vertical-nav li{
width:200px;
height:25px;
margin:5px;
padding:5px;
background-color:#666666;
border:none;
text-align:center;
float:left;
}
.vertical-nav li:hover{
background-color:#f36f25;
color:#FFFFFF;
}
.vertical-nav li a{
font-family:Calibri, Arial;
font-size:18px;
font-weight:bold;
color:#ffffff;
text-decoration:none;
}
I would add it on .vertical-nav li:active { }
this way you can modify both the <li> and the <a> properties
It depends on how you want the 'current' list item to display,
Personally I would always apply to the class to the li, and so it would give you something like:
.vertical-nav li.active {
background-color:#D9A300;
}
and to style the link inside that you would
.vertical-nav li.active a {
color:#000000;
}
I would actually suggest using the term 'current' rather than 'active' as it is easy to misunderstand.
I may of misunderstood what you're requesting.. if i have, let me know and i will amend my answer accordingly.
Helo!
Dropdown in IE7 displayed not correct. When I put mouse over it's appears like inline block and it's too far to the right. When I put mouse over first element in ul, second one disappears. And near each element is weird angle, which is angle of that menu which appears after I put mouse over.
any help or advice will be appreciated!
http://jsfiddle.net/an4Ng/
My code is:
nav ul {
padding:0;
margin-right:15%;
margin-left:15%;
float:left;
position:absolute;
}
nav ul li{
float:left;
position:relative;
overflow:hidden;
z-index:200!important;
padding:5px 35px;
margin-top:5px;
display:block;
}
nav ul li a{
text-decoration:none;
font-family: BebasNeueRegular, Arial,calibri;
font-size:x-large;
color:#eee;
}
nav ul li:hover{
overflow:visible;
position:static;
}
nav ul li ul{
width: auto; height: auto;
display:block;
position:absolute;
border:3px solid gray;
background-color: black;
}
nav ul li ul li a{
text-decoration:none;
font-size:large;
margin-top:15px;
}
nav ul li ul li a:hover{
text-decoration:underline;
color:#caf9ff;
}
I just threw this together but how's this?
http://jsfiddle.net/PgVQC/3/
Obviously I haven't tested it in IE7 but it's how I tend to do my dropdown menus.
You might have to throw in a bit of jquery to get the menu to display in IE7, here's an example from a site I built a few weeks ago.
http://jsfiddle.net/9L4EC/2/
I am using the following CSS but it never shows background images in IE6. But if I remove the filter .. AlphaLoader command, then it shows with grey background.
Here is my CSS Code
.fg-block1 ul, .fg-block3 ul
{
list-style:none;
}
.fg-block1 ul li, .fg-block3 ul li
{
padding-left:28px;
background:url(images/bullet-2.png) no-repeat left top;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
border-bottom:1px dotted #fff;
text-align:left;
background-position:1px 0;
line-height:16px;
padding-bottom:5px;
margin-bottom:5px;
}
.fg-block3 ul li
{
border-bottom:none;
}
.fg-block1 ul li a, .fg-block3 ul li a
{
color:#fff;
text-decoration:none;
}
.fg-block1 ul li a:hover, .fg-block3 ul li a:hover
{
color:#fff;
text-decoration:underline;
}
Try reading this :
http://www.twinhelix.com/css/iepngfix/demo/
AlphaImageLoader hack works only if you set dimensions to the parent container where you load your png as a background.
If you add width and height and display:block to your <li>'s it should be fine. Otherwise - consider different approach.
i recommend jQuery png fix. see links below
jQuery plugin
another source
I never tried the jQuery plugin, but after dealing with a lot of PNG problems in IE6 the best fix I found is by far DD Belated PNG fix. The TwinHelix fix mentioned before presented some problems for me in certain scenarios.