I have implemented my webpage menu by inline "li"-s of "ul". "li" has a colored border and contains "a". Now on mouse hover I need to change color of the text inside "a" and move it 2px up by not moving the li border. How can I do that?
EDIT:
Here is my code:
HTML -->
<div id="menu">
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
</div> <!-- end menu -->
CSSS -->
div#menu ul
{
list-style-type:none;
}
div#menu li
{
margin-left:2px;
display:inline-block;
border: 1px #FFF solid;
border-top:none;
border-bottom-right-radius: 6px 11px;
border-bottom-left-radius: 6px 11px;
}
div#menu li:hover
{
border-top:none;
border: 1px #95d9e4 solid;
}
div#menu li a
{
text-decoration:none;
color:#FFF;
font-size:14px;
margin:0 6px 2px 6px;
line-height:20px;
}
div#menu li a:hover
{
color:#95d9e4;
margin:0 6px 4px 6px;
}
You can do something like:
li:hover {
border-top: none;
}
# Note: this is different from 'li a:hover'!
li:hover a {
position: relative;
top: -2px;
}
Add bottom padding, subtract from line height:
div#menu li a:hover {
color:#95d9e4;
margin:0 6px 6px 6px;
line-height:18px;
padding-bottom:2px;
}
Related
This is my css code of menu bar which is having an error and not working fine.
ul.semiopaquemenu li a:hover, ul.semiopaquemenu li a.selected{
color: black;
-moz-box-shadow: 0 0 2px #595959; /* CSS3 box shadows */
-webkit-box-shadow: 0 0 5px #595959;
box-shadow: 0 0 5px #595959;
padding-top: 10px; /* large padding to get menu item to protrude upwards */
padding-bottom: 10px; /* large padding to get menu item to protrude downwards */
}
ul.semiopaquemenu li {
position: relative;
}
/*sub menu*/
ul.semiopaquemenu li ul.sub-menu {
display:none;
position: absolute;
LEFT:-22PX;
top:25px;
background-color:#99CCFF;
width:130px;
padding:10px;
border-left: 2px solid #4b6c9e;
border-right: 2px solid #4b6c9e;
border-bottom: 2px solid #4b6c9e;
border-bottom-left-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-bottomright: 10px;
text-decoration:italic;
text-transform:uppercase;
}
ul.semiopaquemenu li:hover ul.sub-menu {
display:block;
}
</style>
This my Html code of menu Bar:
<ul class="semiopaquemenu">
<li><asp:LinkButton ID="lbFAQ" runat="server" PostBackUrl="~/FAQ.aspx">Department</asp:LinkButton>
<ul class="sub-menu">
<li>
Sub Menu 1
</li>
<br />
<li>
Sub Menu 2
</li>
<li>
Sub Menu 3
</li>
<br />
<li>
Sub Menu 4
</li>
</ul>
</li>
</ul>
In this I'm not able to make boxes in sub menu items, so please help with this.
JSFiddle Demo
We are not clear what is actually required but what I understood is you need a box on sub menu item as well
try this JS fiddle
Add this Css
.sub-menu a{
border-bottom: 1px solid #000;
padding: 10px;
display: block;
}
Remove Extra Br in between <li> tags
Also Remove Margin padding form submenu <ul>
ul.semiopaquemenu li ul.sub-menu {
padding:0px;
margin:0px;
list-style:none;
}
change css class ul.semiopaquemenu li ul.sub-menu of attributes to border-bottom: 0px solid #4b6c9e;. The lines are appeared due to mention of px in 2px change it to 0px.
Trying to get following result when I hover
for markup below
<ul>
<li>Current Month</li>
<li>Current Week</li>
<li>Previous Month</li>
<li>Previous Week</li>
<li>Next Month</li>
<li>Next Week</li>
<li>Team Calendar</li>
<li>Private Calendar</li>
<li>Settings</li>
</ul>
Can't figure out solution using CSS3 border-radius. Any suggestions?
Update
Please don't post dotted lists. I need solution for arrowed list.
It's not same thing: when you use arrow, you need to set it as background-image of li.
There is another way, to set arrow as a bullet picture, but this time you have no way to control gap between arrow and link.
li:hover {
background-color:#e4e4e4;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
jsfiddle
EDIT
If you want to use arrows instead, just use the :before pseudo element.
ul {
list-style-type:none;
}
li {
padding:5px;
}
li:hover {
width:100px;
background-color:#e4e4e4;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
li:before {
content:"> ";
}
updated jsFiddle
Just replace the > with your image.
EDIT 2
To have the background only over the text, just add that style to the link instead of the li then.
http://jsfiddle.net/SEzxP/2/
EDIT 3
To use an image instead, just use url() after content
li:before { content:url('http://www.nationalacademies.org/xpedio/groups/system/documents/webgraphics/na_right_arrow.gif') /* with class ModalCarrot ??*/
}
Updated jsFiddle
<style>
.my-list li a{
text-decoration:none;
color:#000;
}
.my-list li a:hover
{
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
text-decoration: none;
background-color: #e4e4e4;
}
.my-list li{
list-style-image:url(http://www.nationalacademies.org/xpedio/groups/system/documents/webgraphics/na_right_arrow.gif)
}
</style>
<ul class="my-list">
<!--Example of gap using whitespace-->
<li> Current Month</li>
<!--Example of a gap using padding for finer control of desired gap-->
<li><a style="padding-left:20px;" href="#">Current Week</a></li>
<li>Previous Month</li>
<li>Previous Week</li>
<li>And so on...</li>
</ul>
See jsFiddle also: http://jsfiddle.net/KRaJN/3/
Something like this?
jsFiddle here
CSS
ul {
list-style:none;
background:#E6E6E6;
border-left:3px solid rgb(0, 194, 255);
}
li a {
text-decoration:none;
color:black;
}
li a:hover {
border-radius:5px;
background: #cacaca;
}
li:before {
content:"►";
font-size:10px;
margin-right:10px;
}
body {
background-color: #F3F3F3;
}
ul {
list-style: none;
margin: 0;
padding: 0;
font-family: Arial, Tahoma;
font-size: 13px;
border-left: 1px solid #4AFFFF;
padding-left: 10px;
}
li {
margin: 0;
padding: 0;
}
li:before {
content: " ";
display:inline-block;
border-style: solid;
border-width: 5px 0 5px 5px;
border-color: transparent transparent transparent #000000;
}
li a {
margin-left: 5px;
display: inline-block;
border-radius: 3px;
color: #000;
padding: 3px 5px;
text-decoration: none;
width: 150px;
}
li a:hover {
background-color: #DBDBDB;
font-weight: bold;
}
This should be ezactly how you want it!
http://jsfiddle.net/2JJaW/
If you try that in FireFox:
http://jsfiddle.net/rJUKT/2/
it works fine. The dropdown menu shows at the bottom of its parent like that:
But if you try it with IE7, the dropdown menu shows at the right, like that:
Any idea why it does that?
HTML
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<ul id="menu">
<li>
<span>Menu 1</span>
<ul>
<li>Link 1.1</li>
<li>Link 1.2</li>
<li>Link 1.3</li>
<li>Link 1.4</li>
</ul>
</li>
<li>
<span>Menu 2</span>
<ul>
<li>Link 2.1</li>
<li>Link 2.2</li>
<li>Link 2.3</li>
<li>Link 2.4</li>
</ul>
</li>
</ul>
CSS
#menu { width: 100%; float: right; list-style: none; margin-top: 5px; color: #2A4153; }
#menu li {
float: left;
font-size: 17px;
font-weight: bold;
background-color: #e1f1ff;
border: 1px solid #93b5d4;
margin: 0 1px 0 1px;
padding: 4px 0 0 0;
border-bottom: none;
height: 20px;
}
#menu li a, #menu li span { padding: 4px 7px 2px 7px; cursor: pointer; }
#menu li ul {
clear: both;
position:absolute;
display:none;
padding:0;
list-style:none;
width: 150px;
margin: -1px 0 0 -2px;
}
#menu li ul li {
float: left;
width: 150px;
border: 1px solid #93b5d4;
border-top: none;
font-size: 15px;
font-weight: normal;
background-image: url('16x16/eye.png');
background-position: 4px 4px;
background-repeat: no-repeat;
-moz-border-radius: 0;
}
#menu li ul li a, #menu li ul li span { display:block; padding-left: 25px; }
#menu li ul li:hover { background-color: #e5f6e8; border: 1px solid #93d4a2; border-top: none; }
#menu li:hover { background-color: #e5f6e8; border: 1px solid #93d4a2; border-bottom: none; }
JS
$(function() {
$('#menu li').hover(
function () {
//show its submenu
$('ul', this).slideDown(100);
},
function () {
//hide its submenu
$('ul', this).slideUp(100);
}
);
});
Thanks!
You need to set "top" and "left" properties for dropdown UL
You can check it out this. Some css properties updated in this
http://jsfiddle.net/vkVHC/
If that's the only reason you're using jQuery (for the dropdown effect on hover), you may as well do it using CSS instead (and thus save many kBs being loaded by the site). Also, Alexei's answer is correct.
<style>
*{
margin:0;
padding:0;
border:0;
}
#navlist{
display:block;
width: 100%;
float: left;
list-style: none;
background-color: #f2f2f2;
border-bottom: 5px solid #ccc;
border-top: 5px solid #ccc;
}
#navlist li{
float: left;
}
#navlist li a{
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #069;
border-right: 5px solid #ccc;
}
#navlist li a:hover{
color:#c00;
background-color:#fff;
}
#navlist a#current{
color:#c00;
}
/*SEARCH*/
#navlist li input{
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #069;
background-color: #f2f2f2;
border-right: 5px solid #ccc;
}
#navlist li input:hover{
color: #c00;
background-color:#fff;
}
#navlist li input #searchbar{
}
</style>
</head>
<body>
<div>
<ul id="navlist">
<li>Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
<li>Page 4</li>
<form action="search.asp">
<li><input id="searchbar" type="text" name="searchbar" size="15" value="INSERT SEARCH"/></li>
<li><input class="searchbut" type="submit" value="Search"/></li>
</form>
</ul>
</div>
</body>
This is a horizontal navigation bar with a search bar. My question is two-fold. How can I make it that I specify a height such as height:30px; for the horizontal navigation and the top and bottom padding of each link and input field will fit exactly to match the specified container height (auto-size to specified height)?; I tried using padding:100% 10px; under a{ and input{ however that did not work. Secondly what selector do I type to modify the input classes separately (ex. #navlist li input #searchbar{ size:15; } )?
Instead of vertical padding, why not make the links height: 30px; and line-height: 30px;. Then, you don't have to worry about making the padding fit exactly because, if you make the line height equal to the height, the text will always be vertically centered.
Fiddle
Hows that? Not exactly sure what you need. Let me know and I'll update when I get a chance.
tab not showing in IE 6, working fine in others
http://jsbin.com/ehege/2
how to solve?
<style type="text/css">
*
{
margin:0;
padding:0;
}
li
{
list-style:none;
}
a
{
text-decoration:none;
font-size:14px;
}
#tabcontainer
{
height:62px;
position:relative;
margin: 2em;
font-size: 12px;
}
#tabitemscontainer1 > li > a
{
-moz-border-radius: 7px 7px 0 0;
background: #F3F8C6;
float: left;
margin-right: 2px;
padding: 5px 10px;
border: 1px solid #EABF4A;
/* Added this */
position: relative;
top: 0;
/* end */
}
#tabcontainer ul li li.selected a,#tabitemscontainer1 > li.selected > a
{
color:#AE4329;
font-weight:700;
}
#tabitemscontainer1 > li.selected
{
border-bottom: 1px solid #F3F8C6;
}
#tabitemscontainer1 > li.selected > a
{
/* Added this */
position: relative;
top: 0px;
z-index: 1;
border-bottom: 0px;
/* end */
}
ul.level2
{
background: #F3F8C6;
border:1px solid #EABF4A;
left:0;
position:absolute;
top:28px;
width:463px;
padding:6px;
z-index: 0;
}
#tabcontainer ul li {float:left}
#tabcontainer ul li li
{
float:left;
padding:0 15px 0 4px;
}
</style>
</head>
<body>
<div class="tabcontainer" id="tabcontainer">
<ul id="tabitemscontainer1">
<li class="selected" >
item 1
<ul class="level2">
<li>sub item 1</li>
<li>subitem 2</li>
</ul>
</li>
<li>item2</li>
</ul>
</div>
First of all, IE6 doesn't support the > selector at all.
Secondly, there is no reason to make the a inside the li float to the left. To be able to put padding and margin on the a make it display: inline-block.
Try changing that and remove other unnecessary rules (such as position, which should not be needed on a either) and see if that helps.