I cannot figure out why the forth level is not styling. Can someone please help with this CSS spaghetti?
Fiddler: Menu Demo
You have a few problems with this. For starters I strongly suggest that you clean up your CSS and Validate your HTML.
This is invalid in your CSS, which is part of the problem.
.nav ul li li li:hover a {
background:#00999b url(img/arrow_over.gif) no-repeat 95% 9px !important;
}
And this HTML is invalid: You have unclosed tags inside of other tags.
<ul>
<li class="canieti first"><span>***HOME</span><ul>
<li class="quienessomos first"><span>***SECOND</span><ul>
<li class="consejodirectivonacional"><span>***THIRD</span><ul>
<li class="mesadirectivanacional first"><span>***FOURH</span></li>
</ul>
<div style="clear: both;"></div>
</li>
<li class="canieti first"><span>Other</span></li>
</ul>
<div style="clear: both;"></div>
</li>
</ul>
Related
I am newbie with html css and here is my problem.
I code a nav and subnav at html file as this one
<div id="header">
<!-- begin nav -->
<ul id="nav">
<li>Home</li>
<li>Bane</li>
<li>Tour</li>
<li>Contact</li>
<li>
<a href="">More
<i class="nav-arrow-down ti-arrow-circle-down"></i>
</a>
<ul class="subnav">
<li>Merchandise</li>
<li>Extras</li>
<li>Media</li>
</ul>
</li>
</ul>
<!-- end nav -->
<!-- begin search-->
<div class="search-btn">
<i class="search-icon ti-search"></i>
</div>
<!-- end search-->
</div>
And I want to make a block with color grey at block Merchandise, Extras, Media.
Here is my code at styles.css
#nav .subnav {
/*display: none;*/
position: absolute;
background-color: #fff;
min-width: 160px;
top: 100%;
left: 0;
}
My problem is, when I click to Merchandise, for example, the grey is not display fully all the block as I want. Here is the design
But here is what I got
As you can see in the second picture, the block become fell in.
I thought that I can use display: inline-block; to solve this problem , but when I add this command to #nav .subnav, it does not solve this problem.
They said that, I can use at #nav .subnav this command min-width: 160px;, but it still not well.
Could you please give me some ideas for this problem?
Thank you very much for your time.
I think you should give width:100% of ul tag.
<ul class="subnav" style="width:100%;">
<li>Merchandise</li>
<li>Extras</li>
<li>Media</li>
</ul>
I'm using [class*="menu-class-"]:not(.menu-class-2) for my <li> elements, it works properly. The problem is when I want to point to the <a> tag inside the <li>, [class*="menu-class-"]:not(.menu-class-2) a. For some reason it doesn't work.
CSS:
.nav-menu .menu-class > .sub-menu li[class*="menu-class-"]:not(.menu-class-2) {
display: table-cell;
}
.nav-menu .menu-class > .sub-menu li[class*="menu-class-"]:not(.menu-class-2) a {
text-transform: uppercase;
}
HTML
<ul class="nav-menu" id="menu-main-navigation">
<li class="menu-class">
Nav 1
<ul class="sub-menu">
<li class="menu-class-3">
Nav 2
<ul class="sub-menu">
<li class="menu-class-2">Anchor, it should be lowercase</li>
</ul>
</li>
</ul>
</li>
</ul>
The problem is the <a> inside the <li class="menu-class-2"> is uppercase, but it should be lowercase, because I didn't add any property for this element. The container of the <a> (<li class="menu-class-2">), didn't get the display:table-cell property, so it works properly.
The JSFiddle link: http://jsfiddle.net/qnzos5t4/3/
The reason is because you do have a li that is not .menu-class-2:
<ul class="nav-menu" id="menu-main-navigation">
<li class="menu-class">
Nav 1
<ul class="sub-menu">
<li class="menu-class-3"> <!-- THIS ONE HERE -->
Nav 2
<ul class="sub-menu">
<li class="menu-class-2">Anchor, it should be lowercase</li>
</ul>
</li>
</ul>
</li>
</ul>
Since your css rule is using a whitespace to select the anchor after the li, every <a> descendant of it, will be uppercase. You need to use a child selector:
Updated JsFiddle
.nav-menu .menu-class > .sub-menu li[class*="menu-class-"]:not(.menu-class-2) > a {
I'm making a navbar that consists of icons followed by the title of their page (e.g. Icon of a home followed by the text 'Home'). Let's say I want to change the color of only(!) the icon from black (default) to blue when hovering over either the text or the icon itself using the :hover selector. How can I do that? (I don't want to use jQuery, just CSS)
The markup is now something like this:
<ul id="navbar">
<li class="navgroup">
<ul>
<li class="navicon"><i class="icon-home"></i></li>
<li class="navname">Home</li>
</ul>
</li>
<li class="navgroup">
<ul>
<li class="navicon"><i class="icon-info"></i></li>
<li class="navname">Information</li>
</ul>
</li>
<li class="navgroup">
<ul>
<li class="navicon"><i class="icon-contact"></i></li>
<li class="navname">Contact</li>
</ul>
</li>
</ul>
Of course everything is {display:inline}
Set the hover to the ul inside the navgroups. CSS below does that, you can add whatever styling you like to it.
http://jsfiddle.net/PQShS/9/
CSS:
.navgroup ul:hover .navicon{
color:#FFF;
}
Your Code
<ul id="navbar">
<li class="navgroup">
<ul>
<li class="navicon"><i class="icon-home"></i></li>
<li class="navname">Home</li>
</ul>
</li>
<li class="navgroup">
<ul>
<li class="navicon"><i class="icon-info"></i></li>
<li class="navname">Information</li>
</ul>
</li>
<li class="navgroup">
<ul>
<li class="navicon"><i class="icon-contact"></i></li>
<li class="navname">Contact</li>
</ul>
</li>
</ul>
Since it boils down to changing the look of the icon when the cursor hovers anywhere above the ul element, you can do this:
.navgroup ul:hover .navIcon .icon-home
{
/*hover style for the icon*/
}
.navgroup ul .navIcon .icon-home
{
/*non-hover style for the icon*/
}
You should use the following css:
.navgroup:hover .navicon {
background-color: blue;
}
It will modify just the navicon anytime you hover anywhere within the navgroup
See this jsFiddle
you should use anchor tag
css:
.testing:hover {
color: red;
}
html:
<a class="testing" href="">
<span>hello1</span>
<span style="color:black;">hell2</span>
</a>
Give the whole styling to <a> tag and give the inline styling to other element inside <a> tag that you don't want to change.
i creat a dropdown list when mouse hover at #clim the height of #dropdown change from 0 to 150px . but the code not work .
html code
<div id="menu">
<ul>
<li id="index">Accueil</li>
<li id="clim">Climatisation</li>
<li id="ventil">Ventilation</li>
<li id="electro">Electromenager</li>
</ul>
</div>
</div>
<div id="dropdown" >
<ul>
<li id="index">Climatisation</li>
<li id="clim">Ventilation</li>
</ul>
</div>
CSS code
#dropdown{
margin-left:693px;
width:165px;
height:0px;
position:absolute;
background:#158DFB;
overflow:hidden;
-webkit-transition-duration:0.3s;
}
i have a problem in this part . not working
#clim:hover #dropdown{
height:150px;
}
first of all, your code has extra finishing tags and 2 elements with the same id (#clim), that doesn't make the question very clear.
to make this work with css and no javascript you have to include the hidden element (the dropdown) inside the outer element that you will hover and trigger the dropdown to be shown.
try this instead and then add the remaining css rules you need:
<div id="menu">
<ul>
<li id="one">Accueil</li>
<li id="two">
Climatisation
<ul id="dropdown">
<li id="subone">sub Link</li>
<li id="subtwo">Another sub link</li>
</ul>
</li>
<li id="three">Ventilation</li>
<li id="four">Electromenager</li>
</ul>
</div>
#dropdown{
height: 0;
overflow:hidden;
-webkit-transition-duration:0.3s;
}
#menu:hover #dropdown{
height:150px;
}
when mouse hover at #clim the height of #dropdown change
You cannot do that with pure CSS, because there is no parent selector.
I have a problem with my navigation bar. When loading the page, sometimes it changes to look like its in steps however when you refresh it changes back to normal. I cant seem to find out what im doing wrong! Please help!!
Website is http://www.pearsonfoods.com.au
<div id="nav">
<a href="index.html" >
<div class="navBlock" style="color:red;"><p>Home</p>
</div>
</a>
<a href="about.html">
<div class="navBlock"><p>About us</p>
</div>
</a>
<a href="where.html">
<div class="navBlock"><p>Where we sell</p>
</div>
</a>
<a href="foods.html">
<div class="navBlock"><p>Our Foods</p>
</div>
</a>
<a href="contact.php">
<div class="navBlock"><p>Contact us</p>
</div>
</a>
</div>
Your markup is not well-formed. <a> is an "inline element" and <div> is a "block element". Block elements cannot exist within inline elements.
Your navigation list is better structured as a simple unordered list:
<ul>
<li>Home</li>
<li>About us</li>
<li>Where we sell</li>
</ul>
See? So much cleaner :)
Style each <li><a> as a block-flow element with display: block; (note this does not affect the inline/block semantics of elements, it's strictly a visual thing) and apply float: left; to the <li> elements.
html
<ul class="nav">
<li class="current">Home</li>
<li> About Us</li>
<li> Where we sell</li>
<li> Our Foods</li>
<li> Contact Us</li>
</ul>
css
.nav {
width: 900px;
margin: 0 auto;
}
.nav li {
background-color: rgba(0, 0, 0, 0.72);
border-radius: 10px 10px 0px 0px;
width: 180px;
float:left;
}
.nav li a{
color:#fff;
text-decoration:none;
text-align:center;
line-height:50px;
display:block;
}
.nav li a:hover,.nav li.current a{
color:red;
}
Link to running example