I have a menu:
<ul class="menu">
<li><div class="home"></div> Home</li>
<li><div class="forum"></div> Forum</li>
<li><div class="music"></div> Music</li>
</ul>
And this css:
.menu{
list-style:none;
width:100px;
border:1px solid #ccc;
padding:0px;
margin:0px;
}
.menu li{
height:20px;
margin-top:5px;
padding-left:10px;
}
.menu li div{
display:inline-block;
width:10px;
height:10px;
}
.menu li:hover{
background-color:green;
}
.home{background-color:black;}
.forum{background-color:red;}
.music{background-color:yellow;}
It's all nice and working, but what i want to do is when user hovers on list item that div should change it's background, and each div should change to a different collor, so i need something like:
.home li:hover{
background-color:brown;
}
But now im just trying to select another li inside that div which doesn't exist, well anyways i hope you get the idea, also here is js fiddle: http://jsfiddle.net/xShBB/
You almost had it!
li:hover .home {
background-color:brown;
}
The CSS is always applied to the element on the outermost right of the selector (unless we see support for the parent selector sometime in the future). So your selected div has to be on the right of the selector, whereas the li:hover as its parent has to be on its left.
Your fiddle edited.
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 border-bottom on my li's but I have padding-left:10px on my ul so it nudges everything to the right by 10px.
I'm wondering if its possible to knock the border back over to the left? or is this not possible as the border is a part of the ul?
html
<ul class="menuoptions">
<li>Home</li>
<li>Firewalls</li>
<li>SSL VPN Encryption</li>
<li>Security In Education</li>
<li>Wireless Access Points</li>
</ul>
CSS
.menuoptions {
position:relative;
height:30px;
width:225px;
color:#666;
line-height:40px;
font-weight:bold;
padding-left:10px;
margin-top:-10px;
top:10px;
list-style:none;
}
.menuoptions li {
border-bottom:solid 1px #ccc;
}
Fiddle
You're applying this padding to your ul but not to the li elements. Firstly you need to reset the padding of the ul to 0 (as most browsers apply padding-left to the ul element by default):
.menuoptions {
...
padding: 0;
}
Then give the padding-left to your li elements:
.menuoptions li {
...
padding-left: 10px;
}
Working JSFiddle demo.
It is a part of the ul, however you could use margin-left:10px instead of padding (as long as it is a block element) and remove that part of the border.
I am building a navbar. This is what I want;
change the background-color on the link when hoover over it.
first and last link background should have round corners.
The problem is that either all links get rounded corner or none does!
CSS
nav {
width:100%;
line-height:2;
}
nav ul {
list-style:none;
}
nav li a {
text-decoration:none;
color:white;
float:left;
width:90px;
display:block;
background-color:blue;
padding-left:10px;
}
nav li a:first-child {
border-radius:5px;
}
nav li a:last-child {
border-radius:5px;
}
nav li a:hover {
color:blue;
background-color:white;
}
HTML
<nav>
<ul>
<li>Hem
</li>
<li>om oss
</li>
<li>hitta hit
</li>
<li>Kontakta
</li>
</ul>
</nav>
What you are looking for is something like this?
http://jsfiddle.net/gespinha/mkDWj/2/
You should trigger the a within the first and last li, not the first and last a within an li element, because all li only have one a (which is automatically its own first and last.
You other issue was that you were assigning all borders to have the same radius, when you just want the edge borders to have a radius value.
CSS
nav li:first-child a {
border-radius:5px 0 0 5px;
}
nav li:last-child a {
border-radius:0 5px 5px 0;
}
For more detailed information on the border-radius attribute check this documentation http://www.w3schools.com/cssref/css3_pr_border-radius.asp
i try to make a list Horizontal like
I try to make when hover each item (text and dot) then cursor is the same when hover <a> tag like
But it's true for hover text not for both dot and text.
Frist problem: i can't make width is auto include both dot and text.
Second: I think a tag must be surrounded li to do: hover both (dot and text).
How to make that work. Thanks
Here is my code http://jsfiddle.net/Q6CZ2/
<div id="wrap">
<ul id="navbar">
<li>Exhibits and Events
</li>
<li>About Us</li>
<li>Contact</li>
<li>Press</li>
</ul>
</div>
try this fiddle
it wraps the "li" tags in the "a" tags like so:
<a href="#"><li>Exhibits and Events
</li></a>
that may be what you want.
as for you second problem try deleting:
* {
padding:0px;
margin:0px;
}
and:
#wrap {
margin: 50px;
width:600px;
height:40px;
}
also try this fiddle
You need to change the hovered cursor if li to pointer to change the cursor of the bulletin mark
since you have the rule #wrap a it is overriding the color applied by rule #wrap li:hover
Try
#wrap li:hover, #wrap li:hover a{
color: #CCC;
cursor: pointer;
}
Demo: Fiddle
if i understand your question correctly, you want to use:
li{
cursor:pointer;
}
although i dont know why you want that cursor, because the dot still wont act as a link.
You can keep your <a> tag inside of the <li> tag with this:
* {
padding:0px;
margin:0px;
}
#wrap li {
float:left;
}
#wrap {
/*border: 1px solid #000;*/
margin: 50px;
width:600px;
height:40px;
}
#wrap li {
width:150px;
color:green;
}
#wrap a {
margin-left:-20px;
padding-left:20px;
color:green;
text-decoration:none;
display:block;
}
#wrap li:hover,
#wrap li:hover a {
color: #CCC;
}
http://jsfiddle.net/Q6CZ2/9/
I have a css menu in my aspx page.I want the selected menu to have the same style as hover menu(change the color).I have the css for both hover and current selected menu,and hover is working fine. I have googled this problem and solution was to set "class= current" in the li section of the html code.But my doubt is whether I have to set "class=current" each li sections or is there any need of javascript to report which one is selected out of the menu. I am newbie to css.Please help me..
<div id="tabsJ">
<ul class="menu">
<!-- CSS Tabs -->
<li><span>Reports</span></li>
<li><span>Employee</span></li>
<li><span>Equipment</span></li>
<li><span>Scanner</span></li>
</ul>
</div>
I have used this css
#tabsJ {
float:left;
width:100%;
background:#F4F4F4;
font-size:93%;
line-height:normal;
border-bottom:1px solid #24618E;
}
#tabsJ ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsJ li {
display:inline;
margin:0;
padding:0;
}
#tabsJ a {
float:left;
background: url("../images/tableftJ.gif") no-repeat left top;
margin:0;
padding:0 0 0 5px;
text-decoration:none;
}
#tabsJ a span {
float:left;
display:block;
background:url("../images/tabrightJ.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#24618E;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsJ a span {float:none;}
/* End IE5-Mac hack */
#tabsJ a:hover span {
color:#FFF;
}
#tabsJ a:hover {
background-position:0% -42px;
}
#tabsJ a:hover span {
background-position:100% -42px;
}
#tabsJ #current a {
background-position:0% -42px;
}
#tabsJ #current a span {
background-position:100% -42px;
color:#FFF;
}
Sam Warren - Added jsfiddle - http://jsfiddle.net/ejLTy/
Actually I have this menubar in the masterpage for all the four pages,DataLog.aspx,EmployeeDetails.aspx,EquipmentDetail.aspx and ScannerDetail.aspx.
No Need of JavaScript. Just change li as,
<li class="current"><span>Reports</span></li>
<li><span>Employee</span></li>
<li><span>Equipment</span></li>
<li><span>Scanner</span></li>
for page DataLog.aspx. Use the same routine for all pages by changing the li class as current.
For hover use the pseudo element property in css called
your_division:hover
Hey Just put class="current" in first li. you will get selection on each link. And also
Go to following link, you will get different kind of menus as well as you can customize menu also as per your requirement.:
http://www.cssmenumaker.com/
check it the example of your updated CSS i have just added (current) id in your li
and where you want the selected link add the current id in that particular li.
http://jsfiddle.net/ejLTy/2/