I am new to CSS and I have been looking for a solution but I can't seem to make it working.
I have this simple nav:
<nav class="navbar-left">
<ul>
<li>
My usage report
</li>
</ul>
</nav>
How could I select and style the li inside the nav I have tried but it does not work:
.navbar-left li {
background-color: red;
}
use this
nav > ul{
background-color:red;
}
and try.
.navbar-left ul {
List-style-type: none;
margin: 0px;
padding: 0px;
}
.navbar-left ul li {
background-color: red;
padding: 3px 10px;
margin: 0px;
}
.navbar-left ul li a {
color: #ffffff;
text-decoration: none;
font-size: 16px;
line-height: 18px;
}
<nav class="navbar-left">
<ul>
<li>
My usage report
</li>
<li>
My next report
</li>
</ul>
</nav>
Use this code i hope its work..
Related
This is A navigation bar with links that I made. I want that the black background will not move when hovering...
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
width: 40%;
}
li {float: left;}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
li a:hover {font-size: large;}
<body>
<nav>
<ul>
<li> Home </li>
<li> Articles </li>
<li> About us </li>
</ul>
</nav>
</body>
You can use transform:scale(X), it won't disturb the flow
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
width: 40%;
}
li {float: left;}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
li a:hover {transform:scale(1.15);}
<body>
<nav>
<ul>
<li> Home </li>
<li> Articles </li>
<li> About us </li>
</ul>
</nav>
</body>
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms
By modifying the coordinate space, CSS transforms change the shape and position of the affected content without disrupting the normal document flow. This guide provides an introduction to using transforms.
I suppose you wanted to do something like this. Though I would suggest as #g-cyrelius mentioned, in other answer -- You should make use of transform: scale(2) or something, to avoid break of flow, in your code.
I tried to use your code font-size: large, but this is not the better option.
ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #333333;
width: 80%;
}
li {display: inline-block;text-align:center;position:relative;height: 50px;width: 30%;box-sizing: border-box;}
li a {
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
position:absolute;
top: 0;
left: 30%;
}
li a:hover {
font-size: large;
}
<nav>
<ul>
<li> Home </li>
<li> Articles </li>
<li> About us </li>
</ul>
</nav>
While I know there are several discussions regarding this issue, none of the solutions fixed my problem. No matter what I do, the CSS submenu I'm trying to use disappears after you stop hovering over the parent li. I haven't the slightest idea what could be causing this, and I've really been staring at this forever trying to find a solution and just can't. I tried adding in a top: px; to the submenu in the CSS, which allowed me to select the submenu options, however it also moved the menu so that it would appear covering and centered over the parent li, which is also no good to me because I need it to appear directly below. Could the header be clipping it and if so what would I need to add to change that? All assistance is so greatly appreciated!
.nav ul {
list-style: none;
background-color: #444;
text-align: center;
padding: 0;
margin: 0;
}
.nav li {
font-size: 1.2em;
line-height: 40px;
text-align: left;
display: none;
}
.nav a {
text-decoration: none;
color: #fff;
display: block;
padding-left: 15px;
transition: .3s background-color;
}
.nav a:hover {
background-color: #005f5f;
}
.nav a.active {
background-color: #aaa;
color: #444;
cursor: default;
}
/* Sub Menus */
.nav li li {
font-size: .8em;
}
#media screen and (min-width: 650px) {
.nav li {
width: 130px;
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 1.4em;
display: inline-block;
margin-right: -4px;
}
.nav a {
border-bottom: none;
}
.nav > ul > li {
text-align: center;
}
.nav > ul > li > a {
padding-left: 0;
}
/* Sub Menus */
.nav li ul {
position: absolute;
display: none;
width: inherit;
}
.nav li:hover ul {
display: block;
}
.nav li ul li {
display: block;
}
}
#header {
float: left;
background-color: #ffffff;
cursor: default;
padding: 1.75em 2em 0em 0em;
position: relative;
}
<header>
<img id="logo" src="images/logo.jpg" alt="logo">
<div class="nav">
<ul>
<li class="home">Home
</li>
<li class="tutorials">Tutorials
<ul>
<li>Tutorial #1##
</li>
<li>Tutorial #2
</li>
<li>Tutorial #3
</li>
</ul>
</li>
<li class="about"><a class="active" href="#">About</a>
</li>
<li class="news">Newsletter
<ul>
<li>News #1
</li>
<li>News #2###
</li>
<li>News #3
</li>
</ul>
</li>
<li class="contact">Contact
</li>
</ul>
</div>
</header>
I did figure this out eventually but thought I should come back and update with my solution, in case it is helpful to anyone who is having a similar issue. It was actually really simple.
I had to add a z-index here:
.nav li:hover ul {
display: block;
z-index: 99999;
}
This was recommended to other users, and I did try it initially but did not place it in li:hover thus it didn't work. I guess because the high z-index forces it to the top, it stopped whatever was causing the clipping by placing the submenu above it. I must have misread something somewhere along the line and placed the z-index in the wrong section. The real solution here is probably to read your code carefully!
I have an excerpt of code that I need centered in my header, (just the text and the actual padding). I'm new to coding so if this doesn't sound right don't be surprised. This is the code where I need my list items centered in. Try to make your answer as beginner-like as possible.
CSS:
#navcontainer ul {
list-style-type: none;
margin: 0;
padding: 0;
font-family:'Raleway', sans-serif;
font-size: 23px;
color: #800000;
}
#navcontainer ul li {
display: inline;
}
#navcontainer ul li a {
text-decoration: none;
padding: 0px;
margin: 40px;
}
#navcontainer ul li a:hover {
color: #fff;
background-color: #800000;
}
HTML:
<div id= "navcontainer">
<!-- BEGIN TABS -->
<ul>
<a id="index" class="page-logo" href="/">
<img src="slamlogo.png" alt="Logo">
<li>Jackpot</li>
<li>Profile</li>
<li>Market</li>
<li>Support</li>
</ul>
I know the li elements are messy but I do it so I can see it better. Sorry.
Add a text-align: center to the <ul>:
#navcontainer ul {
text-align: center;
}
Snippet
#navcontainer ul {
list-style-type: none;
margin: 0;
padding: 0;
font-family: 'Raleway', sans-serif;
font-size: 23px;
color: #800000;
text-align: center;
}
#navcontainer ul li {
display: inline;
}
#navcontainer ul li a {
text-decoration: none;
padding: 0px;
margin: 40px;
}
#navcontainer ul li a:hover {
color: #fff;
background-color: #800000;
}
<div id="navcontainer">
<!-- BEGIN TABS -->
<a id="index" class="page-logo" href="/">
<img src="slamlogo.png" alt="Logo">
</a>
<ul>
<li>
Jackpot
</li>
<li>
Profile
</li>
<li>
Market
</li>
<li>
Support
</li>
</ul>
</div>
Also, not a good idea to have anything other than <li> inside the <ul>. You have also omitted a </a>.
There were a few errors in your markup, I've gone ahead and fixed them for you. All that's required to center your list items is text-align: center if you're positioning them as inline elements.
<div id= "navcontainer">
<ul>
<li>
<a id="index" class="page-logo" href="/">
<img src="slamlogo.png" alt="Logo">
</a>
</li>
<li>Jackpot</li>
<li>Profile</li>
<li>Market</li>
<li>Support</li>
</ul>
</div>
#navcontainer ul {
list-style-type: none;
margin: 0;
padding: 0;
font-family:'Raleway', sans-serif;
font-size: 23px;
color: #800000;
text-align: center;
}
#navcontainer ul li {
display: inline;
}
#navcontainer ul li a {
text-decoration: none;
padding: 0px;
margin: 40px;
}
#navcontainer ul li a:hover {
color: #fff;
background-color: #800000;
}
http://jsfiddle.net/ruLns221/
Just to further explain the changes, you should only add li elements to an unordered list (ul) so I've nested your logo within a list item. I've closed some unclosed tags off as well.
I'm having trouble showing a drop down menu in the correct way. This is what I get to see:
This is my HTML code:
<nav class="menuBox">
<ul>
<li>HOME</li>
<li>KLASSEMENTEN</li>
<li>KALENDER</li>
<li>NIEUWS</li>
<li>MEDIA</li>
<li>LINKS</li>
<li>
INLOGGEN
<ul>
<li class="first">
ADMIN
</li>
<li>
EDIT ACCOUNT
</li>
<li class="last">
LOG OUT
</li>
</ul>
</li>
</ul>
</nav>
My CSS code:
/* ### menu Box ### */
.menuBox { position: absolute; top: 74px; right: 2px; }
.menuBox ul { list-style: none; }
.menuBox li { float: left; margin-left: 17px; font-size: 14px; text-transform: uppercase; }
.menuBox li a { color: #3f3f3f; text-decoration: none; display: block; padding-bottom: 14px; }
.menuBox li a:hover { background: url(../images/menu_hover.png) repeat-x 0 bottom; }
.menuBox ul li ul{ display: none; }
.menuBox ul li:hover ul{ display: block; }
I would like to have something like this:
But how can I do this?
add this to your CSS:
.menuBox ul li ul li {
display: block;
float:none;
}
Explanation: you're floating your li elements, but you need to clear the floats for the second level of li elements (those in the sub menus), thus you need to add this declaration.
See fiddle here
I have originally created my navigation in Chrome in which the outcome fits perfectly to my needs. I have then found out that Mozilla Firefox won't output the same result, the drop-down menus under Member Action and Admin Related will display vertically instead on horizontally as i wanted. However my biggest dissapointment was testing the navigation in Internet Explorer which won't even show the drop-down menus.
I would really appreciate someone checking the below code and your feedback, Thanks.
Solved the problem by changing one of the lines in css;
navigation ul li {float: left; list-style:none; }
HTML
<div id="navigationContainer">
<div id="navigation">
<ul>
<li class="borderleft">Home </li>
<li>Register </li>
<li>Search cars</li>
<li>Display all cars</li>
<li>Member Actions
<ul> <!-- Open drop down menu -->
<li class="bordertop">Login</li>
<li class="floatLeft">Member Area</li>
<li>Reservation</li>
<li>Contact us</li>
<li>Admin Related
<ul>
<li class="bordertop">Insert new car</li>
<li>Delete a car</li>
</ul>
</li>
</ul>
</div>
</div>
</BODY>
</HTML>
CSS
* {padding: 0%; margin 0%; } /* Overwrites the browser stylesheet */
#navigationContainer {background:url(images/navi.png); width:100%;position: relative; white-space:nowrap; word-spacing:0; }
#navigation {width:1200px; height:65px; position: relative; font-family: Arial; margin: 2px auto; font-size: 125%; }
#navigation ul { list-style-type: none; }
#navigation ul li {float: left; position: relative; }
#navigation ul li a { border-right: 2px solid #e9e9e9; padding: 20px;
display: block; margin: 0 auto; text-align: center; color: black; text-decoration: none; }
#navigation ul li a:hover { background: blue; color: white; }
#navigation ul li ul { display: none; }
#navigation ul li:hover ul {display: block; position: absolute; }
#navigation ul li ul li {float:left; position:relative; }
#navigation ul li:hover ul li a { background: #12aeef; color: white; position:relative; margin: 0px auto; border-bottom: 1px solid white; border-right: 1px solid white; width: 119px; }
#navigation ul li:hover ul li a:hover { background: blue;}
.bordertop { border-top: 1px solid white; }
.borderleft { border-left: 2px solid #e9e9e9;}
Try this
http://jsfiddle.net/Vf3AJ/
Example from: http://www.cssnewbie.com/example/css-dropdown-menu/horizontal.html
EDITED
Misread horizontal for vertical. tested in IE10, FF, and Chrome
As a side note: horizontal menus have serious issues depending on the width of the viewers screen.
CSS
nav {
position: absolute;
top: 0;
right: 0;
margin: 0;
padding: 0;
}
nav li {
list-style: none;
float: left;
}
nav li a {
display: block;
padding: 3px 8px;
text-transform: uppercase;
text-decoration: none;
color: #999;
font-weight: bold;
}
nav li a:hover {
background: blue;
color: white;
}
nav li ul {
display: none;
}
nav li:hover ul, nav li.hover ul {
position: absolute;
display: inline;
left: 0;
width: 100%;
margin: 0;
padding: 0;
}
nav li:hover li, nav li.hover li {
float: left;
}
nav li:hover li a, navbar li.hover li a {
color: #000;
}
nav li li a:hover {
color: white;
}
HTML
<div id="navigationContainer">
<nav id="navigation">
<ul>
<li class="borderleft">Home
</li>
<li>Register
</li>
<li>Search cars
</li>
<li>Display all cars
</li>
<li>Member Actions
<ul>
<!-- Open drop down menu -->
<li class="bordertop">Login
</li>
<!-- A bordertop class is given to this listed element in order to style a top border for in in the external CSS file. -->
<li class="floatLeft">Member Area
</li>
<li>Reservation
</li>
</ul>
</li>
<li>Contact us
</li>
<li>Admin Related
<ul>
<li class="bordertop">Insert new car
</li>
<li>Delete a car
</li>
</ul>
</li>
</ul>
</nav>
</div>