I cannot change 5th element in my menu. It should have blue background (it works) but I can't change the font color to white.
CSS
ul li:nth-child(5)
{
background-color: #006db6;
width: 100px;
margin: 0 auto;
border-radius: 5px;
}
ul a:nth-child(5)
{
color: #FFF;
}
HTML
<nav>
<ul>
<li>Services</li>
<li>Pricing</li>
<li>Training</li>
<li>About</li>
<li>Login</li> <!-- This element should has other background and font -->
<li>01276 819291</li>
</ul>
</nav>
You can just reuse the same pseudo selector have already as the parent of the a element you want to affect.
ul li:nth-child(5) {
background-color: #006db6;
width: 100px;
margin: 0 auto;
border-radius: 5px;
}
ul li:nth-child(5) a {
color: #fff;
}
I am guessing that the a is inside the 5th li child so your CSS shoud be like this:
ul li:nth-child(5) a {
color: #FFF;
}
The way you are matching for a matches for a hyperlink which is the 5th child of something. If you want to color all hyperlinks within the 5th item of an unsorted list, you want to match for ul li:nth-child(5) a:
ul li:nth-child(5) {
background-color: #006db6;
width: 100px;
margin: 0 auto;
border-radius: 5px;
}
ul li:nth-child(5) a {
color: #FFF;
}
Related
As the first step in making my menu responsive, I want to add a media query in css to change the way the menu displays so that each list item is displayed vertically below the previous item, with it's own submenu items displayed below it before the next list item is displayed. Hope that makes sense. Here are the HTML and CSS that make the menu work in the desktop version of the site:
HTML
<nav>
<img id="logo" src="#logoUrl">
<ul>
<li class="#(CurrentPage.Url == "/" ? "current" : null)">Home</li>
#foreach (var item in menuItems)
{
<li class="#(CurrentPage.Id == item.Id ? "current" : null)">
#item.Name
#if (item.Children.Where("Visible").Any())
{
var subMenuItems = item.Children.Where("Visible");
<ul>
#foreach (var sub in subMenuItems)
{
<li>#sub.Name</li>
}
</ul>
}
</li>
}
</ul>
<br class="clear">
</nav>
(This is on Umbraco, so forgive all the Razor bits)
CSS
#logo {
float: left;
margin-right: 25px;
}
nav {
width: 100%;
height: auto;
background-color: #354a49;
}
nav > ul > li {
display: block;
position: relative;
width: auto;
height: 50px;
float: left;
font-size: 1.1em;
margin: 0px 20px 0px 20px;
padding: 15px 8px 13px 8px;
text-align: center;
}
nav ul li a {
color: #fefce9;
margin-left: auto;
margin-right: auto;
}
nav ul li a:hover {
font-style: italic;
}
nav ul ul {
display: none;
position: absolute;
top: 100%;
left: 0;
z-index: 99;
width: 200px;
}
nav ul li:hover {
border-bottom: 2px solid #fefce9;
background-color: #a1b0af;
}
nav ul li:hover > ul {
display: block;
margin-top: 2px;
}
nav ul li ul li {
display: block;
float: none;
padding: 20px 3px;
background-color: #a1b0af;
border-bottom: 2px solid #fefce9;
}
nav ul li ul li a {
color: #fefce9;
}
nav li.current {
background-color: #a1b0af;
border-bottom: 2px solid #fefce9;
}
nav li.current > a {
color: #fefce9;
font-style: italic;
}
And here is the CSS I have in my media query at the moment:
#logo {
margin-right: -50px;
}
nav > ul > li {
float: none;
margin: 0px;
}
nav ul ul {
width: 100%;
}
nav li.current {
background-color: inherit;
}
That displays the main menu items one below the other OK, but when I try to change things so that the submenu items appear between the menu items I just end up with the submenu items appearing over the top of the menu items and each other.
EDIT
Here's the rendered HTML as requested:
</nav>
<img id="logo" src="/media/1042/wshalogo.png">
<ul>
<li class="current">Home</li>
<li>
About us
<ul>
<li>Our People</li>
<li>Who we were and are</li>
<li>Our Houses</li>
<li>Annual Reports</li>
</ul>
</li>
<li>
Being a Tenant
<ul>
<li>Asbestos</li>
<li>Being Safe & Secure</li>
</ul>
</li>
<li>
News
<ul>
<li>Community Garden</li>
<li>Football Team</li>
<li>Health Centre</li>
</ul>
</li>
</ul>
<br class="clear">
</nav>
Your second level ul is position: absolute; which means it's taken out of the normal document flow and won't take up space in relation to any other elements. Try changing absolute to relative. That should keep the items correctly positioned in the menu.
nav ul ul {
display: none;
position: absolute; /* <--- Try changing this to relative. */
top: 100%;
left: 0;
z-index: 99;
width: 200px;
}
Also, the fixed height on your top-level li doesn't let the element grow past 50px. Try setting that instead to a min-height:
nav > ul > li {
display: block;
position: relative;
width: auto;
height: 50px; /* <-- min-height: 50px */
float: left;
font-size: 1.1em;
margin: 0px 20px 0px 20px;
padding: 15px 8px 13px 8px;
text-align: center;
}
That worked in this fiddle but led to awkward jumping when the sub-menu was hovered and then un-hovered.
Also, consider your use-case - if you're doing this to support tablet/mobile devices the :hover state won't work the same way it doesn't when you're using a mouse. Users would have to know to press to the side of the "About Us" link text to see the dropdown, otherwise they'll get taken directly to the "About Us" page without seeing the :hover state. It might be necessary to either show all the items in a tree structure or use JavaScript to add additional functionality for the submenus.
Here's a decent solution to a responsive sub-menu without JavaScript, but it also doesn't use links for top-level menu items that have sub-items.
I am creating a simple menu in CSS. The only "trick" is that I'd like diagonal left and right borders.
That's not really a problem though. Problem is that I need the first item of the menu to get a regular vertical border instead of a diagonal one.
<nav>
<ul>
<li><span>Home</span></li>
<li><span>Tutorials</span></li>
<li><span>Snippets</span></li>
<li><span>Articles</span></li>
<li><span>Resources</span></li>
<li><span>Contact</span></li>
</ul>
</nav>
and the CSS:
nav ul {
list-style: none;
margin: 0;
padding: 0;
text-align: center;
}
nav li {
display: inline-block;
margin: 0 5px;
transition: all 0.3s;
}
nav a {
display: block;
color: #285064;
transition: all 0.3s;
}
nav a:hover {
color: #12242d;
}
nav span {
display: block;
}
#media all and (min-width: 690px) {
nav li {
margin: 0;
transform: skewX(-10deg);
}
nav a {
padding: 10px 20px;
color: #fff;
background-color: #285064;
}
nav a:hover {
color: #fff;
background-color: #12242d;
}
nav span {
transform: skewX(10deg);
}
}
Here is a JsFiddle of the current menu:
http://jsfiddle.net/mfL8509t/
Basically on that example, I'd need the "home" container to get a vertical regular border on the left hand side only.
How could I do that?
Thanks a lot!
Very easy, use first-child of
nav li:first-child {
transform: inherit;
}
I have a dropdown menu on my site's top navigation bar. I'd like the items in this menu to expand horizontally to fit their contents. For some reason they won't expand to be wider than their parent.
I've recreated the issue in CodePen here: http://codepen.io/YM_Industries/pen/GgJBQv
In my actual website I don't have control over this section of the DOM, so I'm a little constrained there.
Here's the code for my recreation in case CodePen is unavailable:
HTML:
<ul class="nav">
<li>
Home
</li>
<li>
v Test1 v
<ul class="submenu">
<li>
Submenu 1
</li>
<li>
Long text wraps and is ugly :/
</li>
</ul>
</li>
<li>
Test2
</li>
</ul>
CSS:
* {
font-family: sans-serif;
}
ul.nav,
ul.nav li,
ul.nav ul {
display: block;
padding: 0;
}
ul.nav li {
position: relative;
}
/* Style each link */
ul.nav li > a {
display: block;
padding: 10px 15px;
line-height: 20px;
height: 20px;
background: rgba(254, 197, 46, 1);
border: none;
}
/* Bring back the first level links */
ul.nav > li {
float: left;
margin-right: 1px;
}
/* Selected/Hover effect */
ul.nav li > a:hover {
color: #004d85;
background: rgb(255, 213, 102);
}
/* Display dropdown in the correct location */
ul.nav li ul.submenu {
position: absolute;
top: 40px !important;
left: 0px !important;
display: none;
}
ul.nav li:hover ul.submenu {
display: block;
}
/* Set font+colour for site links */
ul.nav li a,
ul.nav li a:link,
ul.nav li a:visited {
color: black;
font-size: medium;
text-decoration: none;
}
ul.nav li a:hover,
ul.nav li a:active {
color: blue;
}
If I explicitly set a width on my submenu items (400px for example) they will expand correctly, but for some reason the content isn't making them get wider. I'd really rather not have to hardcode the width.
Thanks,
YM
The solution is rather easy. You just have to add
ul.submenu a {
white-space: nowrap;
}
which prevents the text from wrapping and therefore doesn't stick to the parent container size.
You can check it out here http://codepen.io/anon/pen/QwbYvG
just fixed your pen - upgrade your css classes:
ul.nav li ul.submenu
{
position: absolute;
top: 40px !important;
left: 0px !important;
width:auto;
display: none;
background: rgb(254, 197, 4);
}
ul.nav li ul.submenu > li
{
display:inline-block;
white-space: nowrap;
}
AND IT USES CSS 2 :)
When you mouseover a navigation item, the colour of the link changes to white and background of that link goes black. The hover state does a display:block on a hidden nested . When I move the mouse over to the nested (i.e. the sub menu), the hover state on the top-level nav returns back to the way it was. How do I make it persist whilst my mouse is over the sub-menu?
In other words, when I hover the link 'What we do', the font color changes to #fff and background to #111 and the ul.sub-menu appears with the same black background and white text. This all appears whilst my mouse hovers over 'What we do', but as soon as it moves to the sub-menu, the background on 'What we do' returns to its original color and font color changes back to black. Meanwhile my sub-menu remains open in the correct format. How do I get the 'state' to persist when I move the mouse hover away?
Here is a jsfiddle for it: http://jsfiddle.net/U77re/
nav ul#menu-top-nav { position: absolute; top: 35px; left: 113px; padding: 16px 30px 17px 20px; width: 797px; background: #F0F1F4;}
nav ul#menu-top-nav li { position: relative; float: left; margin: 0 40px 0 0; }
nav ul#menu-top-nav li a:hover { color: #fff; background: #111; }
nav ul#menu-top-nav li#menu-item-1186 { margin-right: 0; }
nav ul#menu-top-nav ul.sub-menu { display: none; }
nav ul#menu-top-nav ul.sub-menu li a { margin: 0; }
nav ul#menu-top-nav li:hover ul.sub-menu { display: block; position: absolute; left:0; top: 30px; width: 250px; padding: 20px;
z-index: 1; background: #111; }
nav ul#menu-top-nav ul.sub-menu p { margin: 0 0 25px 0; color: #fff; line-height: 1.4; font-weight: bold; }
nav ul#menu-top-nav ul.sub-menu li { width: 250px; margin: 0 0 20px 20px; color: #fff; list-style-position: inside; list-style-type: disc; }
nav ul#menu-top-nav ul.sub-menu li a { color: #fff; }
<nav role="navigation">
<ul class="menu" id="menu-top-nav">
<li id="menu-item-1596">What we do
<ul class="sub-menu">
<p>Explore what we do and the people behind it</p>
<li id="menu-item-1600">About IFSW</li>
<li id="menu-item-1604">Partners</li>
<li id="menu-item-1601">Contact</li>
</ul>
</li>
</ul>
</nav>
Switch your hover event from the a anchor element to the li element, like so:
nav ul#menu-top-nav li:hover a { color: #fff; background: #111; }
I am doing an horizontal dropdown menu. It looks like this :
[menu1][menu2][menu3][menu4]
But when I resize (less wide) my browser, the menu appears like :
[menu1][menu2]
[menu3][menu4]
I want it to remain in line all the time!
EDIT: my CSS file
/* General */
#cssdropdown, #cssdropdown ul {
list-style: none;
position: relative;
visibility: visible;
z-index: 1;
overflow: hidden;
}
#cssdropdown, #cssdropdown * { padding: 0; margin: 0; }
/* Head links */
#cssdropdown li.headlink {
width: 11.911em;
float: left;
margin-left: -1px;
border: 1px black solid;
background-color: #e9e9e9;
text-align: center;
}
#cssdropdown li.headlink a { display: block; padding: 10px; }
/* Child lists and links */
#cssdropdown li.headlink ul { display: none; border-top: 1px black solid; text-align: center; }
#cssdropdown li.headlink:hover ul { display: block; }
#cssdropdown li.headlink ul li a { padding: 5px; height: 17px;}
#cssdropdown li.headlink ul li a:hover { background-color: #FF9; }
/* Pretty styling */
body {
font-family: verdana, arial, sans-serif;
font-size: 0.7em;
position: static;
}
#cssdropdown a { color: black; font-weight: bold; font-size:10px } #cssdropdown ul li a:hover { text-decoration: none; }
#cssdropdown li.headlink { background-color: #FFF50A; }
#cssdropdown li.headlink ul { background-position: bottom; padding-bottom: 10px; }
/*headermenu*/
#headerMenu {
position: relative;
float: left;
color: #DDD;
z-index: 1;
height: 34px;
right: 10px;
width: auto;
}
<div align="left" class="thrColElsHdr" id="headerMenu">
<ul id="cssdropdown" name="cssdropdown">
<li class="headlink"> Ecole
<ul>
<li>Histoire</li>
<li>Philosophie</li>
<li>Méthode</li>
<li>Equipe</li>
<li>Qualité</li>
<li>Services</li>
<li>Emplois</li>
</ul>
</li>
<li class="headlink"> Cours
<ul>
<li>Individuel</li>
<li>Semi-privé</li>
<li>Mini-groupe</li>
<li>Intensif</li>
<li>Entreprises</li>
<li>A distance</li>
<li>Par téléphone</li>
<li>Coaching</li>
<li>Soutien scolaire</li>
<li>Diplômes officiels</li>
</ul>
</li>
<li class="headlink"> Inscription
<ul>
<li>Auto-évaluation</li>
<li>Conditions</li>
<li>Tarifs</li>
<li>Formulaires</li>
</ul>
</li>
<li class="headlink"> Contact
<ul>
<li>Ecole</li>
<li>Lien externe</li>
</ul>
</li>
</ul>
</div><br/>
You should set min-width on the element containing the menu.
you want to use the css
white-space:nowrap;
this should be applied to the parent of your menus
if you provide some of the actual html, I can be more specific
for example
<div class='menuContainer'>
<span>menu1</span>
<span>menu2</span>
<span>menu3</span>
<span>menu4</span>
</div>
and css like
.menuContainer {
white-space:nowrap;
}
see http://www.w3schools.com/css/pr_text_white-space.asp
Edit in response to op question modifications
I assume #cssdropdown is the id your container around all the menus. please let me know the html for this if it's not correct.
Anyways, in this case, you should add to your css
#cssdropdown {
white-space:nowrap;
}
One other note, I see the width of your mens is set to 11.911em. When I see that I can only assume that you set it to be exactly the right width for whatever font you have. keep in mind your users may have slightly different fonts and suddenly your pixel perfect sizing is meaningless. design with a little more flexibility in mind.
Sounds like your width property isn't being set in either the HTML or the CSS.
Can you provide some sample code?