code below not working
<!DOCTYPE html>
<html>
<head>
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
}
li:hover
{
display:inline;
font-size:30px;
}
</style>
</head>
<body>
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</body>
</html>
i supposed they should have been arranged themselves horizontally on hovering.
link- http://www.w3schools.com/css/tryit.asp?filename=trycss_display_inline_list
I am not sure if you are going right direction.
Do you want to rearage position of menu items when user put mouse cursor on it?
It can not work. If user put mouse on "About" item, it disapears and apperas in first line with other elements, but it loses hover state and apears back, under the cursor, so it get back hover state and move to first line again in loop....
You need to apply it to all li on hover of the ul
DEMO http://jsfiddle.net/LstNS/26/
ul
{
list-style-type:none;
margin:0;
padding:0;
}
ul:hover li
{
display:inline;
font-size:30px;
}
Though this effect is a little weird, try this way:
ul {
list-style-type:none;
margin:0;
padding:0;
}
ul:hover li { /*<<<here's the magic!*/
display:inline-block;
font-size:30px;
}
The way you've tried, you're not changing the anchor to be inline, but the list item. The problem is that you're setting the display: inline to only one "li", this is not applied to the others items. You need to make all of your "li" inline on the hover of your whole list (ul).
I'm sorry, but I don't understand your question. Are you trying to inline your links? If so, try this for your css markup..
<style>
ul { list-style-type:none; margin:0; padding:0; }
ul li { display: inline !important; }
ul li a:link, ul li a:visited { text-decoration: none; color: #1122CC; }
ul li a:hover, ul li a:active { text-decoration: underline; }
</style>
Related
I am trying to create a tabs for my page, but my links are not appearing horizontally. I have used float:left which is used to make links appear horizontally. Please let me know why?
<html>
<head>
<title>Test</title>
<style type="text/css">
#navbar #holder ul {
list-style: none;
margin: 0;
padding:0;
}
#navbar #holder ul li a {
text-decoration:none;
float: left;
line-height:20px;
margin-right:5px;
font-family:Calibri;
color:#000;
}
</style>
</head>
<body bgcolor="SteelBlue">
<div id="navbar">
<div id="holder">
<ul>
<li>Home</li>
<li>Product</li>
<li>Mixers</li>
<li>Others</li>
</ul>
</div>
</div>
</body>
</html>
The float left property needs to be applied to the Li element.
In your code it is being applied to the a element within the Li.
This can work, but if the parent element has any height (or if overflow:hidden is applied to it), they will stack up underneath each other and the starting position for the child elements will be on the left, so float:left won't change their position.
It might be easier to think of the list elements as being for layout and positioning, and the anchor element for visual appearance.
#navbar #holder ul {
list-style: none;
margin: 0;
padding:0;
}
#navbar #holder ul li {
float:left;
}
#navbar #holder ul li a {
text-decoration:none;
line-height:20px;
margin-right:5px;
font-family:Calibri;
color:#000;
display:block;
}
The links are appearing horizontally for me:
JSFiddle
Are you viewing the links in a small viewport?
Also, what browser are you using?
It is also more common for the float: left property to be applied to the li element, not the enclosed a element.
I am getting a problem with my project where our client has used a logo image inside the menu's ul li. He has used a class with li where the logo is placed but I cant use the class with it; I also do not want to use :nth-child because in future we may add a new menu element. I currently have an empty anchor inside the logo li. Is it possible in the CSS to select this anchor which is empty. Please help me.
Thanks in advance
Client Site: http://www.kangaroopartners.com/about/
My Site: http://kangaroopartners-2.hs-sites.com/test1
Demo http://jsfiddle.net/thwkav0e/
CSS and HTML:
ul {
display:block;
width:100%;
text-align:center;
list-style: none;
margin:0;
padding:0;
}
ul li {
display:inline-block;
padding: 10px;
}
ul li:nth-child(4), ul li:last-child {
background:red;
width:50px;
}
<ul>
<li>Hello1</li>
<li>Hello2</li>
<li>Hello3</li>
<li></li>
<li>Hello4</li>
<li></li>
</ul>
:empty selector should be what you are looking for.
ul li a:empty {
background:red;
width:50px;
display: inline-block;
height: 10px;
}
http://jsfiddle.net/thwkav0e/1/
So what i want to happen is for the background of the current link(the link of the page you are currently on) to turn a seperate color and also for the font color to change to white. I also want this same effect to occur on a:hover (for links you are hovering over). I have gotten very close to this effect, however my one issue is that to change the font color of a:hover the mouse needs to be directly over the link and not simply within its container. I understand why this would not work since im giving this property to the link specifically and not the list, but font color changes for the "a" dont work if i put them with #nav li.
The effects i want are similar to those of the NavBar on this page http://www.vitalsmarts.com/
CSS/HTML:
<style>
#nav{
list-style-type:none;
text-align:center;
height:50px;
background-image:url("image/menuBg.png");
}
#nav li {
float:left;
width:155px;
}
#nav li a {
text-decoration:none;
font-size:1.3em;
color:#000000;
}
#nav li:hover {
background-color:#143D17;
color:#FFFFFF;
}
#nav li a:hover {
color:#FFFFFF;
}
#nav li a.currentFont {
color:#FFFFFF;
}
.navPadS {
padding:13px 0px;
}
.navPadL {
padding:13px 12px;
}
.navPadLL {
padding-top:13px;
padding-bottom:13px;
padding-right:20px;
}
.current {
background-color:#143D17;
}
</style>
<body>
<!Header and NavBar>
<div id="navCont">
<ul id="nav" class"tbBord">
<li class="navPadS"><a class="currentFont" href="index.html">home</a></li>
<li class="navPadLL">home</li>
<li class="navPadL">home</li>
<li class="navPadS">home</li>
<li class="navPadS">home</li>
<li class="navPadS">home</li>
</ul>
</div>
</body>
</html>
add this to your css
#nav li a {
text-decoration:none;
font-size:1.3em;
color:#000000;
display:block;
}
Don't style the li's just float them left and put all your style in the a's. I've created this example on JS Bin but the bit that matters is:
#nav li {
margin:0;
padding:0;
float:left;
}
#nav li a {
text-decoration:none;
font-size:1.3em;
color:#000000;
width:155px;
display:block;
padding:10px;
}
#nav li a:hover, #nav li a.currentFont {
background-color:#143D17;
color:#FFFFFF;
}
I have a simple navigation with a sub-menu on one of my main navigation items. When the user hovers over this i would like the sub-menu item to show and when you go onto the sub-menu li items the main menu link to still have the background colour 'hovered' state still active. Thing is i cant even get the sub-menu item to show!
I have tried the usual display:none and when :hovered { display:block}; but it's ignoring it.
What am u missing? Must be something so simple but cannot see in the css styling.
Here is a link to an example of how it is setup: http://jsfiddle.net/ULSsa/
here is the demo link http://jsfiddle.net/ULSsa/6/ with corrected css
*{
padding:0;
margin:0;
}
body {
font:normal 12px/18px Arial, Helvetica, sans-serif;
color:#000;
padding:20px;
background-color:#F2F2F2;
}
ul, li, ol {
list-style-type:none;
}
ul#nav-1 {
width:60%;
height:46px;
border:1px solid red;
}
ul#nav-1 li {
position:relative;
display:inline-block;
*float:left;
margin-top:16px;
margin-left:-4px;
}
ul#nav-1 li a {
padding:22px 13px;
font-size:14px;
}
ul#nav-1 li:hover a,
ul#nav-1 li a:hover {
cursor:pointer;
background-color:#000;
}
ul#nav-1 li ul#sub-menu {
display:none;
position:absolute;
width:200px;
list-style:none;
left:0;
top:19px;
}
ul#nav-1 li:hover ul#sub-menu {
display:block !important;
}
ul#nav-1 ul#sub-menu li {
float: none;
margin: 0;
}
ul#nav-1 ul#sub-menu li a {
border-bottom:1px solid #dbddd4;
background-color:#f2f2f2;
width:200px;
text-align:left;
display: block;
padding:0;
padding-left:18px;
padding-top:13px;
padding-bottom:13px;
float:left;
margin:0;
}
ul#nav-1 ul#sub-menu li:hover a {
background-color:#3a3a3a;
color:#FFF;
}
Pretty easy. The submenu ul#sub-menu is not a child of the anchor element, but of the list element. You must either put the submenu inside the anchor element or check for the hover on the list element as following:
ul#nav-1 li:hover > ul#sub-menu { instead of ul#nav-1 li a:hover > ul#sub-menu {
http://jsfiddle.net/ULSsa/2/
You are using wrong selector here, it should be
ul#nav-1 li a:hover + ul#sub-menu { /* Note the + sign instead of > */
display:block !important;
}
Demo
Explanation: You are using > which will select direct child elements of a which in your case are none, so you need to use + adjacent selector to trigger the adjacent element
Just change your ul#nav-1 li a:hover > ul#sub-menu to ul#nav-1 li:hover > ul#sub-menu because the submenu it is a child of li and not of an anchor (a).
See the example by clicking here.
If you do not know, the CSS > selector means the specifically child of the element.
Updated
To maintain the link state, just do this:
ul#nav-1 li:hover a {
background-color: black;
}
See the example by clicking here.
I am trying to change the background colour of an anchor element when it's in a hover state, the problem is I am not able to achieve this with style I have below.
jsfiddle
http://jsfiddle.net/fwP6g/
css
.dropdown ul{
margin:0; padding:0; float:left; width:100%;
}
.dropdown ul li{
list-style:none; float:left; width:100%;
}
.dropdown ul li a{
float:left; width: 265px; height:20px; padding:5px;
padding-top:10px; color:#000; font-size:12px;
border-bottom:1px dotted #666; background-color:#FFF;
}
.dropdown ul li a:hover{
background-color:#F80101; !important
}
.dropdown ul li:last-child a{
border-bottom:none;
}
.dropdown ul li a#pink{
background-color:#FFE8E8;
}
html
<div class="dropdown">
<ul>
<li>Orders</li>
<li>Favourites</li>
<li>Account</li>
<li>Settings</li>
</ul>
</div>
I'm confused, I don't why this is not working, any help would be appreciated.
The !important needs to go before the closing ;.
.dropdown ul li a:hover {
background-color:#F80101 !important;
}
jsFiddle example
It's not semantically correct to have two elements with the same id. Also, using ids for your selector gives the rule a very high precedence, which is why you need to use !important.
I would suggest giving the last 2 list item links a class of pink instead of an id.
Then you would just need to declare the .pink rule before the :hover rule. Since both rules have the same precedence, and the :hover rule comes after, it will override the .pink rule.
http://jsfiddle.net/fwP6g/2/
HTML
...
<li><a href="/account" class='pink'>Account</a></li>
<li>Settings</li>
...
CSS
.dropdown ul li a.pink{
background-color:#FFE8E8;
}
.dropdown ul li a:hover{
background-color:#F80101;
}
Change your id="pink" to class="pink", than in your css add this to your hover .dropdown ul li a.pink:hover
Add this:
false:
.dropdown ul li a:hover{
background-color:#F80101; !important
}
true:
.dropdown ul li a:hover{
background-color:#F80101 !important;
}