I have got a task to create menu. Here I want to set an arrow image to menu when selecting its submenu. I did an example with this image.But I want to delete that image from that onload and show it when we selects its submenu. Only the selected menus image should be displayed.
My css file is
#menu {
font-family: Arial;
font-size: 12px;
//background: #F8F8F8;
}
#menu > li > a {
font-family: Verdana, Arial, sans-serif;
font-style: normal;
color:#787878;
font-weight: bold;
}
#menu > li > a:hover {
color: #000;
}
#menu ul {
background: none repeat scroll 0 0 #FFFFFF;
border-radius: 0 0 5px 5px;
margin-top: 1px;
}
#menu ul li a {
color: #000;
}
#menu ul li a:hover {
background: #E0E0E0;
}
.logout {
float:right;
width:300px;
}
.title {
float:left;
width:300px;
}
#footer {
width:100%;
height:100px;
float:left;
}
.subchild-list {
margin:0;
position: absolute !important;
top:0;
right:-87px;
//border-color: #ccc #FFFFFF #ccc #FFFFFF;
}
.child-list ul {
display: none !important;
position: absolute !important;
z-index: 999 !important;
}
.child-list li {
position:relative !important;
}
.child-list li:hover ul {
display: block !important;
}
.child-list li{
border-left:1px solid #C0C0C0;
border-right:1px solid #C0C0C0;
}
.child-list ul{
border-top:1px solid #C0C0C0;
border-bottom:5px solid #C0C0C0;
}
.child-list{
border-bottom:5px solid #C0C0C0;
}
.nav-subchild
{
border-color: #ccc #FFFFFF #ccc #FFFFFF;
}
#nav > ul > li:hover {
border-color: #ccc #ccc #FFFFFF;
border-style: solid;
border-width: 1px;
padding-bottom: 0;
border-radius:1px;
}
#menu > li {
border-bottom:#ccc;
border-left: 1px solid #fff;
border-right: 1px solid #fff;
border-top: 1px solid #fff;
}
#nav ul li:hover ul { margin-left:-1px; } #nav ul li ul:hover { margin-left:-1px; }
ul li ul li
{
width: 180px;
}
.subchild-list {
margin:0;
right:-183px;
position: absolute !important;
top:0;
}
.hassub {
background: url('arrow.gif') right no-repeat;
}
#menu li:hover > a {
color: #000;
font-weight:bold;
}
How can I solve this problem?
Now just define this css
#menu .child-list > li:hover > a {
background: #E0E0E0 url(http://www.coeliac.org.uk/sites/coeliac.org.uk/themes/coeliac/images/icon_arrow_small_right.gif) right no-repeat;
}
Live Demo
Have a look at this ..
#menu ul li a:hover {
background:url(http://www.coeliac.org.uk/sites/coeliac.org.uk/themes/coeliac/images/icon_arrow_small_right.gif) right no-repeat #E0E0E0;
}
Live Demo
This are the few changes
#menu ul li a:hover {
// background: #E0E0E0;
background:url(http://www.coeliac.org.uk/sites/coeliac.org.uk/themes/coeliac/images/icon_arrow_small_right.gif) right no-repeat;
}
.hassub {
// background: //url(http://www.coeliac.org.uk/sites/coeliac.org.uk/themes/coeliac/images/i//con_arrow_small_right.gif) right no-repeat;
}
Live Demo
Related
a newb here looking to solve a css problem with my navigation bar.
There is an extra empty space on the right side that should not be there. I would like the li elements to fill the nav bar completely with all properties intact.
Can you please help and see what in my css code is the culprit?
Thank you
#nav {
height: 46px;
}
#nav > li {
float: left;
padding: 14px 29px 10px 29px;
border-right:1px solid #eae5e4;
border-left:1px solid #ffffff;
}
#nav > li a {
color: #7d8184;
font-size: 15px;
}
#nav > li:last-child { border-right:none; }
#nav > li.over, #nav > li:hover, #nav > li.active {
border-bottom:5px solid #f15a3b;
}
#nav > li > a > span {
}
#nav > li.over.parent {
}
#nav .homelink {
}
#nav .custommenuitem {
border-left:1px solid #eae5e4;
border-right:none;
display:none;
}
#nav li.block_li > a > span, #nav li.block_li > a {
cursor: default;
}
#nav li div.custom_menu_item {
position: absolute;
padding: 15px;
z-index: 1500;
width: 980px;
margin-left: -1px;
border: 1px solid #EAE5E4;
top:45px;
}
divide 100% by the number of drop downs you have then insert that width pecentage here like this
#nav > li {
float: left;
width: 25%; /* if you had 4 dropdowns*/
padding: 14px 29px 10px 29px;
border-right:1px solid #eae5e4;
border-left:1px solid #ffffff;}
My navigation bar works perfectly fine, any image links work fine, but all text links on my page jump down when I click on them. Most of them jump so far you cannot actually click it.
I also noticed my a:visited links are inheriting the color #000 from somewhere, when they should be #616161. There is no issue when browsing on my Android device, but happens in IE11 and Chrome32.
The HTML is nothing special. Just
Page Name
type links. It has to be something with the CSS.
The CSS:
body {
background-color: #7296d9;
max-width:1000px;
}
#wrapper {
width:auto;
background:url(../images/bg.jpg);
background-repeat:repeat;
margin:4px;
}
#content {
width:98%;
text-align:center;
margin:auto;
}
#paragraph {
width:80%;
font-size:18px;
color: #666;
font-weight:100;
text-align:justify;
margin:10px auto 25px auto;
}
.reviews {
width:80%;
margin:auto;
text-align:justify;
color: #666;
}
p {
margin:10px 0 10px 0;
}
h1 {
line-height:48px;
font-size:36px;
font-weight:bold;
text-align:center;
margin-top:10px;
}
h2 {
line-height:42px;
font-size:24px;
font-weight:bold;
text-align:center;
}
a:link, a:visited {
color: #616161;
text-decoration: underline;
}
a:hover, a:active {
color: #ffffff;
text-decoration: underline;
}
#header {
height:86px;
max-height:86px;
width:98%;
min-width:500px;
position:relative;
background-image:url(../images/logo.png);
background-repeat:no-repeat;
}
#header .left {
float:left;
height:auto;
}
#header .media-header {
float:right;
margin-top:50px;
margin-right:-20px;
}
#menu ul li:hover > ul {
display: block;
}
#menu {
display:table;
width:100%;
background: -webkit-linear-gradient( #d5d5d5, #595959); /* For Safari */
background: -o-linear-gradient( #d5d5d5, #595959); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient( #d5d5d5, #595959); /* For Firefox 3.6 to 15 */
background: linear-gradient( #d5d5d5, #595959); /* Standard syntax */
-webkit-border-radius: 25px;
-o-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
}
#menu ul ul {
display: none;
}
#menu ul {
height:auto;
font-size: 16px;
font-family: "Times New Roman", Times, serif;
font-weight: bold;
text-align: center;
text-shadow: 2px 2px 2px #cccccc;
text-decoration:none;
list-style: none;
position: relative;
display: table-row;
}
#menu a:link, a:visited {
display:block;
text-decoration: none;
color: #000000;
padding: 8px auto 8px auto;
}
#menu a:hover, a:active {
display:block;
padding:5px;
text-decoration:none;
color: #fff;
}
#menu ul:after {
content: "";
clear:both;
display: block;
}
#menu ul li {
display:table-cell;
width:auto;
}
#menu ul a:link, a:visited {
display: block;
padding: 5px;
color: #000;
text-decoration: none;
}
#menu ul a:hover, a:active {
display:block;
padding:5px;
text-decoration:none;
color: #fff;
}
#menu ul ul {
background: #999;
border-radius: 0px;
padding: 0;
position: absolute;
}
#menu ul ul li {
width:auto;
border-top: 1px solid #ccc;
position: relative;
display:block;
}
#menu ul ul li a {
padding: 5px;
text-align:left;
color: #000;
}
#menu ul ul li a:hover {
color: #FFF;
}
#menu ul ul:last-child, nav ul ul:last-child a {
-webkit-border-bottom-right-radius: 10px;
-o-border-bottom-right-radius: 10px;
-moz-border-radius-bottomright: 10px;
border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-o-border-bottom-left-radius: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-left-radius: 10px;
}
.center {
text-align:center;
}
#reviews {
width:80%;
text-align:justify;
overflow:hidden;
margin:25px auto 25px auto;
}
#reviews img {
position:relative;
float:left;
}
#form {
color: #666;
margin:0px auto 0px auto;
width:350px;
}
#form p {
color: #666;
margin:0px auto 0px auto;
width:350px;
}
.bottombar {
margin:auto;
width:100%;
}
#footer {
display:block;
font-size:12px;
color: #616161;
text-align:center;
width:auto;
margin:5px auto 5px auto;
}
#footer img {
text-align:center;
color: #616161;
width:100%;
margin:5px auto 5px auto;
}
#media-footer {
text-align:center;
margin:10px 0 15px 55px;
}
#media-footer img {
text-align:center;
margin:10px 0 15px 55px;
}
nav ul {
display:none;
}
#minimenu {
display:none;
}
It's because you are adding padding to the element when it is :active:
#menu ul a:hover, a:active {
display: block;
padding: 5px;
text-decoration: none;
color: #fff;
}
It's worth noting that you are repeating the same styling in different instances.
#menu a:hover, a:active {
display: block;
padding: 5px;
text-decoration: none;
color: #fff;
}
Just remove the padding from both declarations and it will work as expected.
Humans needed... My CSS drop down menu will not show up in ie8 and flashes then shuts on iPhone 5 browsers (responsive design)..using code from a themeforest template. without further adieu here is the code.
HTML
<div id="navigation">
<ul>
<li>Home</li>
<li>About
<ul>
<li>Leadership</li>
<li>Giving</li>
<li>Careers</li>
<li>Contact</li>
</ul>
</li>
</ul>
</div>
CSS
/* Main Navigation
==========================*/
#navigation {
float: right;
}
#navigation ul, #navigation li {
list-style:none;
padding:0;
margin:0;
display:inline;
}
#navigation ul li{
float:left;
position:relative;
}
#navigation ul li a {
font-family: Arial, sans-serif;
display: inline-block;
color: #888;
padding: 40px 6px 10px 6px;
margin: 0 5px;
text-decoration: none;
font-size: 14px;
border-bottom: 3px solid transparent;
}
#navigation ul li a:hover{
border-bottom: 3px solid #555;
}
#navigation ul ul {
opacity: 0;
margin: -3px 0 0 5px;
filter: alpha(opacity=0);
position: absolute;
top:-99999px;
left: 0;
background: #fff;
border: 1px solid #dddddd;
border-top: 3px solid #555;
z-index: 999;
}
#navigation ul ul li a:hover {
border-bottom: 1px solid #ddd;
}
#navigation ul ul li a {
padding: 8px 0;
display: block;
width: 130px;
margin: 0 16px;
font-family: Arial, sans-serif;
font-weight: normal;
font-size: 12px;
border-bottom: 1px solid #dddddd;
border-top: 1px solid transparent;
}
#navigation ul ul ul {
position:absolute;
top:-99999px;
left:100%;
opacity: 0;
margin: -3px 0 0 0;
z-index: 999;
}
#navigation ul ul ul li a {
border-bottom: 1px solid #dddddd !important;
border-top: 1px solid transparent;
}
#navigation ul ul li:last-child a, #navigation ul ul li:last-child a:hover {
border-bottom: 1px solid transparent
}
#navigation ul ul ul li:last-child a {
border-bottom: 1px solid transparent !important
}
#navigation ul li:hover>ul{
opacity: 1;
position:absolute;
top:99%;
left:0;
}
#navigation ul ul li:hover>ul{
position:absolute;
top:0; left:100%;
opacity: 1;
z-index:497;
background: #fff border: 0;
}
#navigation ul li:hover > a {
color: #444;
}
#navigation ul ul li:hover > a {
border-top: 1px solid transparent;
color: #444;
}
#current {
font-weight: bold !important;
color: #444 !important;
border-bottom: 3px solid #555 !important;
}
Your problem appears to be with the line:
filter: alpha(opacity=0);
To get this to work in IE8, you need to include the line:
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=0)"; /*IE8*/
Alternatively, removing the line entirely doesn't seem to break anything. You might need to play around with different browsers and see what happens.
There's a more in-depth discussion on opacity in IE8 here: Opacity in web pages?
I'm afraid I can't help you on the iPhone side of things.
You also appear to have a bug in your code:
#navigation ul ul li:hover>ul{
position:absolute;
top:0; left:100%;
opacity: 1;
z-index:497;
background: #fff border: 0;
}
You're missing a semi colon after #fff on the last line. Use the W3C CSS Validator to help you trap bugs like this.
I have got a task to create menu. I want to set the menu as selected while selecting its subchild. My css file is
#wrapper {
width:100%;
height:500px;
}
h2 {
color:#787878;
}
#menu, #menu ul {
list-style: none;
//padding: 2px;
}
#nav{
border-bottom: 1px solid #CCCCCC;
border-spacing: 0;
display: table;
float: left;
height: 25px;
width: 100%;
}
#nav ul {
margin: 0;
padding: 0;
}
#nav > ul > li:hover {
background: none repeat scroll 0 0 #FFFFFF;
border-color: #ccc #ccc #FFFFFF;
border-style: solid;
border-width: 1px;
padding-bottom: 0;
border-radius:1px;
}
.menu-child {
width:160px;
display:block !important;
}
#nav ul li ul li:hover {
}
#nav ul li ul :hover {
}
#menu {
float: left;
height: 25px;
}
#menu> li {
float: left;
}
#menu li a {
display: block;
height: 2em;
line-height: 2em;
padding: 0 1.5em;
text-decoration: none;
}
#menu ul {
position: absolute;
display: none;
z-index: 999;
}
#menu ul li a {
}
#menu li:hover ul {
display: block;
}
#menu {
font-family: Arial;
font-size: 12px;
//background: #F8F8F8;
}
#menu > li > a {
font-family: Verdana, Arial, sans-serif;
font-style: normal;
color:#787878;
font-weight: bold;
}
#menu > li > a:hover {
color: #000;
}
#menu ul {
background: none repeat scroll 0 0 #FFFFFF;
border-radius: 0 0 5px 5px;
margin-top: 1px;
}
#menu ul li a {
color: #000;
}
#menu ul li a:hover {
background: #E0E0E0;
}
.logout {
float:right;
width:300px;
}
.title {
float:left;
width:300px;
}
#footer {
width:100%;
height:100px;
float:left;
}
.subchild-list {
margin:0;
position: absolute !important;
top:0;
right:-87px;
//border-color: #ccc #FFFFFF #ccc #FFFFFF;
}
.child-list ul {
display: none !important;
position: absolute !important;
z-index: 999 !important;
}
.child-list li {
position:relative !important;
}
.child-list li:hover ul {
display: block !important;
}
.child-list li{
border-left:1px solid #C0C0C0;
border-right:1px solid #C0C0C0;
}
.child-list ul{
border-top:1px solid #C0C0C0;
border-bottom:5px solid #C0C0C0;
}
.child-list{
border-bottom:5px solid #C0C0C0;
}
.nav-subchild
{
border-color: #ccc #FFFFFF #ccc #FFFFFF;
}
#nav > ul > li:hover {
border-color: #ccc #ccc #FFFFFF;
border-style: solid;
border-width: 1px;
padding-bottom: 0;
border-radius:1px;
}
#menu > li {
border-bottom:#ccc;
border-left: 1px solid #fff;
border-right: 1px solid #fff;
border-top: 1px solid #fff;
}
#nav ul li:hover ul { margin-left:-1px; } #nav ul li ul:hover { margin-left:-1px; }
ul li ul li
{
width: 180px;
}
.subchild-list {
margin:0;
right:-183px;
position: absolute !important;
top:0;
}
.hassub {
background: url('arrow.gif') right no-repeat;
}
How can i solve this problem?
try this
font-weight:bold;
If I understand your question right, you want the top level navigation to have an active state even on a sub level hover.
In that case, here's the answer (append to your CSS):
#menu li:hover > a {
color: #000;
}
Jsfiddle: http://jsfiddle.net/wDcV5/2/
I have got a task to do horizontal menu. While creating the menu i got a problem with the style.When we are hovering the menu it is jumping and also the sub child menu is comes at different position depending on the size of the text. My css file is
#wrapper {
width:100%;
height:500px;
}
h2 {
color:#787878;
}
#menu, #menu ul {
list-style: none;
//padding: 2px;
}
#nav{
border-bottom: 1px solid #CCCCCC;
border-spacing: 0;
display: table;
float: left;
height: 25px;
width: 100%;
}
#nav ul {
margin: 0;
padding: 0;
}
#nav > ul > li:hover {
background: none repeat scroll 0 0 #FFFFFF;
border-color: #ccc #ccc #FFFFFF;
border-style: solid;
border-width: 1px;
padding-bottom: 0;
border-radius:1px;
}
.menu-child {
width:160px;
display:block !important;
}
#nav ul li ul li:hover {
}
#nav ul li ul :hover {
}
#menu {
float: left;
height: 25px;
}
#menu> li {
float: left;
}
#menu li a {
display: block;
height: 2em;
line-height: 2em;
padding: 0 1.5em;
text-decoration: none;
}
#menu ul {
position: absolute;
display: none;
z-index: 999;
}
#menu ul li a {
}
#menu li:hover ul {
display: block;
}
#menu {
font-family: Arial;
font-size: 12px;
//background: #F8F8F8;
}
#menu > li > a {
font-family: Verdana, Arial, sans-serif;
font-style: normal;
color:#787878;
font-weight: bold;
}
#menu > li > a:hover {
color: #000;
}
#menu ul {
background: none repeat scroll 0 0 #FFFFFF;
border-radius: 0 0 5px 5px;
margin-top: 1px;
}
#menu ul li a {
color: #000;
}
#menu ul li a:hover {
background: #E0E0E0;
}
.logout {
float:right;
width:300px;
}
.title {
float:left;
width:300px;
}
#footer {
width:100%;
height:100px;
float:left;
}
.subchild-list {
margin:0;
position: absolute !important;
top:0;
right:-87px;
//border-color: #ccc #FFFFFF #ccc #FFFFFF;
}
.child-list ul {
display: none !important;
position: absolute !important;
z-index: 999 !important;
}
.child-list li {
position:relative !important;
}
.child-list li:hover ul {
display: block !important;
}
.child-list li{
border-left:1px solid #C0C0C0;
border-right:1px solid #C0C0C0;
}
.child-list ul{
border-top:1px solid #C0C0C0;
border-bottom:5px solid #C0C0C0;
}
.child-list{
border-bottom:5px solid #C0C0C0;
}
.nav-subchild
{
border-color: #ccc #FFFFFF #ccc #FFFFFF;
}
You can see my code from http://jsfiddle.net/ucpcA/1/ How can i solve this problem?
Add to css this:
li {border: 1px solid #fff;}
I tried it in fiddle and it solved "jumping"
//Edit
The main idea is to set border to the top li elements so when you add additional border with color it will not jump
//Edit 2 to solve your 2nd problem
To sovle your 2nd prbolem put this line
.subchild-list {
margin:0;
right:-150px;
position: absolute !important;
top:0; }
#menu ul li {width: 150px;}
It is just an example so you will see what it does. Put there the ewidth which you really need.