I have this vertical that i am trying to customize
<ul class="tracking_nav nav nav-tabs nav-stacked">
<li class="tracking_list_type" style=".tracking_list_type:hover{background-color:none !important}">
<span class="topinfo"><span class="number_plates"><img src="u_online.gif" />Number 10</span></span><span class="moving_status">76 moving</span><br/><span class="link_text">Brother David Cameroon</span><span class="linkso">TrackingPlaybackCommands</span></li>
<li>Tutorials</li>
<li>Practice Editor </li>
<li>Gallery</li>
<li>Contact</li>
</ul>
This is the css
moving_status{
float:right;
color:#76EE00;
font-weight:bold;
}
.linkso{margin-left:13px;}
.topinfo{
display:inline-block;
margin-bottom:5px;
}
.linkso > a{
margin-right:4px;
}
This is the fiddle https://jsfiddle.net/codebreaker87/eoo87zkk/
I have tried .tracking_list_type > li:hover{background-color:none !important;} but i cant seem to target the li element.How can i fix this?.
You need to target hover backgrounds with :hover. For your case, you need the following:
.nav-tabs>li>a:hover
However I would recommend
.nav-tabs>li>a:hover, .nav>li>a:focus, .nav>li>a:hover
Related
We have horizontal 1st level and 2nd level navigations. When a 1st level li is hovered over, a second level ul is displayed horizontally above the first level ul.
How do we make the second level ul remain visible when the mouse leaves the first level li? Is this possible with CSS only..??
Here's the CSS:
ul.ebene1{display:inline;}
ul.ebene1 li{display:inline; list-style-type:none; margin-right:2%;}
ul.ebene2{display:none;}
ul.ebene1 li:hover ul.ebene2{display:block; position:fixed; bottom:6%; width:80%; font-size:0.9em;}
And the HTML:
<ul class="ebene1">
<li>NAV1
<ul class="ebene2">
<li>Nav2</li>
<li>Nav2</li>
</ul>
</li>
<li>NAV1</li>
<li>NAV1
<ul class="ebene2">
<li>Nav2</li>
<li>Nav2</li>
</ul>
</li>
<li>NAV1</li>
</ul>
You can't do that with only CSS. The :hover pseudo classes is triggered when you hover the element. So when leaving the element stops the hover effect.
You could use JQuery to show the submenu.
[EDIT]
A Jquery solution would be this:
HTML
<ul class="ebene1">
<li>NAV1
<ul class="ebene2">
<li>Nav1.1</li>
<li>Nav1.2</li>
</ul>
</li>
<li>NAV2</li>
<li>NAV3
<ul class="ebene2">
<li>Nav3.1</li>
<li>Nav3.2</li>
</ul>
</li>
<li>NAV4</li>
</ul>
CSS
ul.ebene1 {
display:inline;
}
ul.ebene1 li {
display:inline;
list-style-type:none;
margin-right:2%;
}
.ebene2 {
display:none;
position:fixed;
bottom:6%;
width:80%;
font-size:0.9em;
}
JQuery
(".ebene1 li").mouseover( function() {
if( $(this).children('ul').length > 0 ) // check if a ul exists in the li
{
$('.ebene2').hide(); // hide all submenus
$(this).find('ul').show(); // show this submenu
}
});
And a DEMO.
I am having a few issues with my css menu. I'm redesigning all my CSS menus and doing away with any javascript assistance. I'm sure it's something simple so please go easy on me.
First Issue: I am trying to connect a top border of an ul to the right border of an li.
I have tried adding a top-border to 'ul#nav ul' but it goes all the way across.
I have tried adding margin-bottom:-1px to 'ul#nav li:hover > a' to make it extend down to cover the top-border above but that doesn't work.
Second Issue: When the mouse is active in the slideout, I'm getting a weird space on the main li.
Final Issue: I've looked at several online tutorials to add a '>' graphic when there is a submenu but can't seem to get it integrated in the right places.
HERE IS LINK TO CODE: http://jsfiddle.net/Bqh9a/
Here is code:
<style type="text/css">
.pipe {margin-top:4px;}
.li_hover {color: #002398;}
.bottom_li {margin-bottom:6px;margin-top:2px;}
ul#nav li .bottom_li:hover > a{background:#E0E0E0;}
ul#nav, ul#nav ul {width:300px;list-style:none;margin:0;padding:0;position:absolute;z-index:9;border:1px solid #297BCE;}
ul#nav li {position:relative;float:left;zoom:1; /*Needed for IE*/}
ul#nav li:hover > a{background:#E0E0E0;color:#297BCE;border-left:1px solid #297BCE;border-right:1px solid #297BCE;border-top:1px solid #E0E0E0;border-bottom:1px solid #E0E0E0;text-decoration:underline;}
ul#nav li:hover > ul{display:block;}
ul#nav li a{border:1px solid #FFFFFF;display:block;padding:4px 6px 4px 6px;color:#297BCE;font-weight:bold;font-family:Arial, Times New Roman, Tahoma;font-size:13px;text-decoration:none;}
ul#nav ul {padding-left:8px;padding-top:2px;display:none;position:absolute;width:150px;border:1px solid #297BCE;background:#E0E0E0;left:0;border-top:none;}
ul#nav ul li{background:#E0E0E0;color:#000;border:none;float:none;}
ul#nav ul li a{border:none;width:100%;padding:0;display:block;color:#000000;line-height:145%;font-size:12px;font-weight:normal;}
ul#nav ul li a:hover{border:none;width:150px;color:#297BCE;>}
ul#nav ul ul{position: absolute;top: 0;left: 100%;margin-left:-3px;display: none;}
ul#nav ul ul{padding-left:8px;position:absolute;width:150px;border:1px solid #297BCE;background:#E0E0E0;}
ul#nav ul li:hover ul{display: block;}
</style>
<ul id="nav">
<li>About Us
<ul>
<li>Who We Are</li>
<li>Our Goals</li>
<li>Our Team</li>
<li>Press
<ul>
<li>2006</li>
<li>2007</li>
<li>2008</li>
</ul>
</li>
<li>Impressum</li>
<li class="bottom_li"><span class="li_hover">See all</span></li>
</ul>
</li>
<li class="pipe">|</li>
<li>About Us
<ul>
<li>Who We Are</li>
<li>Our Goals</li>
<li>Our Team</li>
<li>Press
<ul>
<li>2006</li>
<li>2007</li>
<li>2008</li>
</ul>
</li>
<li>Impressum</li>
<li class="bottom_li"><span class="li_hover">See all</span></li>
</ul>
</li>
<li class="pipe">|</li>
<li>About Us
<ul>
<li>Who We Are</li>
<li>Our Goals</li>
<li>Our Team</li>
<li>Press
<ul>
<li>2006</li>
<li>2007</li>
<li>2008</li>
</ul>
</li>
<li>Impressum</li>
<li class="bottom_li"><span class="li_hover">See all</span></li>
</ul>
</li>
</ul>
Thanks so much for help in the right direction.
1st Issue:
One way to achieve this is to make the a links higher z-index (z-index:100 # Line 7), then give the ul menu a z-index of -1 and use 'top:23px' to pull the menu up underneath the .
But its a bit of a hack and if I were you I would avoid trying to do this
2nd Issue:
at line 7 of your CSS the :hover style is acting on all li's, even the ones that are nested, it would be much better for you to give the inner ul's their own classes, then you can apply more specific styles, at the moment the border-left is being applied to all li's that are beneath #nav
3rd Issue:
You can add another element () inside the li and float right, this could have a > image or just a > character.
I know you said you are removing javascript but it might be worth looking at jQuery UI Menu and looking at the CSS layout they use, (or just for pinching their icons)
I want to make a drop menu like the one in http://www.homeshop18.com/ with css only without jquery in particular the All category menu.I have tried css drop down menu but the problem is i am unable to fix the second level menu at the top. any suggestion will be appreciated.
Can't understand what you problem is from the way you posted the question but here is a quick menu I put together that only uses CSS that functions like the menu on the site you posted.
HTML:
<ul class="main">
<li>all
<ul class="sub">
<li>books
<ul class="sub2">
<li>fiction</li>
<li>biography</li>
</ul>
</li>
<li>mobile
<ul class="sub2">
<li>android</li>
<li>cmda</li>
<li>battery</li>
</ul>
</li>
</ul>
</li>
</ul>
CSS:
li {
border:1px solid;
padding:1px;
}
.main {
list-style:none;
position:relative;
}
.sub, .sub2 {
list-style:none;
position:absolute;
display:none;
width:75px;
}
.sub2 {
float:left;
left:75px;
top:0px;
}
.main li:hover .sub,
.sub li:hover .sub2{
display:block;
}
I'm using wordpress 3.2.1 and worked on the wp_nav_menu to get a customized "Top navigation menu" that looks like this:
<ul id="nav-list">
<li>HOME</li>
<li>THE ASSOCIATION</li>
<ul class="sub-menu">
<li>
<a>WHO WE ARE</a>
</li>
</ul>
<li>CONTACTS</li>
<li>PRODUCTS</li>
<ul class="sub-menu">
<li>
<a>SHOES</a>
</li>
<li>
<a>UMBRELLAS</a>
</li>
</ul>
</ul>
the css I have for the menu is:
#nav-list{
float:left;
margin-left:290px;
}
#nav-list li
{
display:inline ;
padding:4px 18px 4px 0 ;
}
.sub-menu
{
float:left;
display:none;
}
ul#nav-list li:hover ul.sub-menu
{
background:red;
position:absolute;
top:20px;
z-index:9999;
display: block;
}
The sub-menus are by default hidden but they display on their parent's hover.Everything works fine but on the parent's hover the sub-menu is absolutely posiitoned with left=0 and I want it to be right under the parent button!How can I achieve that?
thanks
Luca
just set the parent li's position to relative; #nav-list li{position:relative}
i did it up on jsfiddle for ya, fyi i took out the margin-left on the #nav-list just so its more clear.
http://jsfiddle.net/jalbertbowdenii/deVYx/
I need my submenu links to have a different border-color than the parents list one.
My menu
<ul id="menu">
<li>Link</li>
<li>Link</li>
<li class="menuActive">Link
<ul class='children'>
<li>subLink</li>
<li>subLink</li>
<li>subLink</li>
</ul>
</li>
</ul>
My CSS :
#menu li a{
border-bottom-width:2px;
border-bottom-style:solid;
border-bottom-color:red;
text-decoration:none;
}
.children li a{
border-bottom-color:blue;
background:lightgray;
}
As you can see, my subLinks get red border, how can set blue ones just for them ?
See it in jsFiddle
Use #menu .children a.
This is a problem concerning specificity.
Live Demo
You need to read up on CSS Specificity http://css-tricks.com/specifics-on-css-specificity/