I have a drop down menu done in css only, done in the following way:
.top-menu
{
padding:0;
margin:0;
list-style: none;
height:50px;
}
.top-menu > li > a
{
display:block;
text-decoration:none;
font-size:16px;
line-height:16px;
padding:15px 20px;
border: 1px solid transparent;
color:#fff;
}
.top-menu > li > a:hover
{
background-color: #fff;
color: #333;
border: 1px solid #004488;
}
.top-menu > li.popout:hover ul
{
display:block;
}
The class "top-menu" is for the top level ul element.
What I want to do is apply the ".top-menu > li > a:hover" style for when I hover over the popout ul, so that the top level link has the hover style also when I hover above its descendants in the ul below.
Thanks.
Here is the html:
<ul class="top-menu">
<li>Home</li>
<li>
Welcome
</li>
<li class="popout">
link2
<ul>
<li>sublink1</li>
<li>sublink2</li>
</ul>
</li>
I want to apply the hover style for link2, when I hover over the descendant ul (which contains sublink2 and sublink1)
I know this was asked a while back, but for others having your problem I believe you can achieve the desired results by changing this:
.top-menu > li > a:hover
{
background-color: #fff;
color: #333;
border: 1px solid #004488;
}
The '>' means the direct child. If you leave the '>' out you can get all child elements matching the selector. Below achieved the results I believe you desire:
ul li:hover > a
{
background-color: #fff;
color: #333;
border: 1px solid #004488;
}
That way when you hover over the child the parent will still display the hover styles.
I believe you need to use JavaScript for that particular behavior. There is no way for you to apply styles to the parent and child at the same time.
Edit: Thinking about this again, you could do something like that:
.topmenu:hover > li.popout {...} /* Parent styles */
.topmenu:hover li.popout ul {...} /* Child styles */
Related
<nav>
<ul>
<li class="span4">
<a href="/">
<span class="inner">Nav 1</span>
</a>
</li>
I have pipes at the side of each of my nav elements, but they do not extend to the entire height of the nav (only the text).
On rollover the pipe is still visible on the side. it's hard to explain but I have a fiddle:
Fiddle
My question is, what's the best approach, so that when on rollover you hide the pipes from the user?
You could add this to your css, if that is what you need, it hides all pipes when you hover one element:
ul:hover .inner {
border-right: 2px solid transparent;
}
See the fiddle: http://jsfiddle.net/v27DS/30/
Also, if you want to hide the pipes of only the hovered element, try:
.inner:hover {
border-right: 2px solid transparent;
}
See the fiddle: http://jsfiddle.net/v27DS/31/
Try using the sibling combinator to access the previous or next element and make its border transparent.
Read this: http://css-tricks.com/child-and-sibling-selectors/
You can do like this:
nav > ul > li:hover ~ li > a > span {
border-left: none;
border-right: 2px solid black;
}
.inner {
border-left: 2px solid black;
}
nav > ul > li:first-of-type > a > span {
border-left: none;
}
nav > ul > li:last-of-type > a > span{
border-right: 2px solid black;
}
Fiddle
I have a menu where I want the li tags have a border. I am doing this in my css :
.sf-menu li a
{
list-style-position:inside;
border: 2px solid white;
color:#fffefe;
}
But it is a bit ugly. I want to make it work like that : by putting some margins. I am trying but nothing and I can't think of relevant tags in order to search on google.
Firstly, list-style-position should be applied to the <UL> tag.
Secondly, you should set the border to the <li> tag, and look at your code:
.sf-menu li a
So you are selecting <a> inside of <li> in the class .sf-menu, and you need to select just <li>, simply:
.sf-menu li {
//your styles here
}
Please make an example on jsfiddle (or any other platform) for further help
Then you need to set border on li tag not in a tag
.sf-menu li
{
border: 2px solid white;
}
And also list-style-position should be defined in ul tag not in a tag
.sf-menu
{
list-style-position:inside;
}
Try this jsFiddle. I think this is what you're after: http://jsfiddle.net/nnLjK/3/
I split your .sf-menu and your .sf-menu CSS declarations a bit...
This works as well. I would like to find other solutions as well though.
.sf-menu li a
{
list-style-position:inside;
border: 2px solid white;
border-radius: 8px;
color:#fffefe;
padding:8px;
}
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
Apologies for what is probably quite a basic question, but I've not found a solution to this online.
I have a simple CSS menu, here's the CSS:
#nav {
width: 100%;
float: left;
margin: 0 0 3em 0;
padding: 0;
list-style: none;
opacity:1;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
}
#nav li {
float: left;
}
#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #069;
border-right: 1px solid #ccc;
}
#nav li a:hover {
color: #c00;
background-color: #fff;
}
/* End navigation bar styling. */
This is from an online tutorial, so not my code.
Here's the HTML:
<!-- language: lang-html -->
<ul id="nav">
<li>About Us</li>
<li>Our Products</li>
<li>FAQs</li>
<li>Contact</li>
<li>Login</li>
</ul>
All I want to do is have different colo(u)rs for each menu item when hovered over.
I assume you need to create a separate id (or class) for each item, but I am unsure of the syntax and no matter what I try it simply won't work.
Many thanks for any assistance.
add a class to the href links and then in your css call the hover state and then style accordingly. Here is an example using your code: http://jsfiddle.net/LGL37/
The HTML:
TEXT
The CSS
.about:hover { background: yellow; }
EDIT: this is a much better solution than the other answer as it is cross browser compatible and if you need to style more in the future you'll have individual classes to target rather than nth which can get confusing.
If you don't use the :nth-child() selector, you can add a unique class to each li in the nav
<li class="about"></li>
and set a hover effect in your stylesheet for that specific class
#nav li.about a:hover { background-color: red; }
You can use :nth-child selector but it won't work in some legacy versions of IE.
JsFiddle
#nav li:nth-child(1) a:hover {
color:green;
}
#nav li:nth-child(2) a:hover {
color:blue;
}
etc.
You could use nth-child:
li:nth-child(2) a:hover{
color: red;
}
http://jsfiddle.net/fAbFg/
This example affects the second item.
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)