i have made a simple navbar with css but some how it is showing margin at the botton of my <li> tags.Here the picture.And when i remove the float property the margin under the <li> disappears.
And here is the css.
nav{
background:#333;
}
nav ul{
display:inline-block;
}
nav ul li{
display:inline;
float:left;
list-style:none;
}
nav ul li a{
color:#fff;
padding:15px;
display:block;
text-decoration:none;
font-weight:600;
font-size:16px;
}
You should remove display:inline-block; from the nav ul and use display:inline-block; for the nav ul li with no float i.e.
nav{
background:#333;
}
nav ul li{
display:inline-block;
list-style:none;
}
nav ul li a{
color:#fff;
padding:15px;
display:block;
text-decoration:none;
font-weight:600;
font-size:16px;
}
Add inline-block to li
DEMO
CSS
nav ul li{
display:inline-block;
list-style:none;
}
Related
How i make the child lists expand and collapse by click ?
.tree-list li > ul{
display: none;
}
See the Pen Pure CSS Fullscreen Overlay Menu .
You can use it by jquery/javascript or you can simply use css for hover.
for jquery just write onclick ul display:block along with this css.
<nav id="dropdown">
<ul>
<li>Menu
<ul>
<li> 1</li>
<li> 2</li>
<li> 3</li>
</ul>
</nav>
In CSS
#dropdown
{
margin-top:15px
}
#dropdown ul
{
list-style:none;
position:relative;
float:left;
margin:0;
padding:0
}
#dropdown ul a
{
display:block;
color:#333;
text-decoration:none;
font-weight:700;
font-size:12px;
line-height:32px;
padding:0 15px;
font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif
}
#dropdown ul li
{
position:relative;
float:left;
margin:0;
padding:0
}
#dropdown ul li:hover
{
background:#f6f6f6
}
#dropdown ul ul
{
display:none;
position:absolute;
top:100%;
left:0;
background:#fff;
padding:0
}
#dropdown ul ul li
{
float:none;
width:200px
}
#dropdown ul ul a
{
line-height:120%;
padding:10px 15px
}
#dropdown ul ul ul
{
top:0;
left:100%
}
#dropdown ul li:hover > ul
{
display:block
}
I am trying to do a Menu that will appear when Window width is resized to a small resolution. Below is the HTML and CSS are below
<nav>
<a id="menu-dropdown"><img src="http://localhost/influenza/logo/menu.png" /></a>
<ul>
<li><a class="tab-click" href="http://localhost/influenza/index.php">Home</a></li>
<li>Articles</li>
<li>Webinars</li>
</ul>
</nav>
CSS:
nav ul
{
list-style:none;
}
nav li{
display:inline;
line-height:1.5px;
}
nav li:not(:first-child) > :only-child,
nav ul > :first-child a{
text-decoration:none;
font-size:1.4em !important;
outline:1px solid blue;
padding:8px;
letter-spacing:0.9px;
margin-left:18px;
}
nav li:not(:first-child) > :only-child{
color:blue;
}
nav ul > :first-child a{
color:white !important;
background:blue;
}
Output in Horizontal:
Home Articles Webinars
How can I bring back the list to Vertical then set "ul" position to absolute and make "nav a" to be visible. The list should display vertically like below
Home
Articles
Webinars
nav{
position:relative;
}
nav ul
{
position:absolute;
top:40px; /* this height is same as the menu.png */
left:0;
z-index:999;
list-style:none;
}
nav li{
list-style:none;
display:block;
}
nav ul li a{
display:block;
}
nav li:not(:first-child) > :only-child,
nav ul > :first-child a{
text-decoration:none;
font-size:1.4em !important;
outline:1px solid blue;
padding:8px;
letter-spacing:0.9px;
margin-left:18px;
}
nav li:not(:first-child) > :only-child{
color:blue;
}
nav ul > :first-child a{
color:white !important;
background:blue;
}
<nav>
<a id="menu-dropdown"><img src="http://localhost/influenza/logo/menu.png" /></a>
<ul>
<li><a class="tab-click" href="http://localhost/influenza/index.php">Home</a></li>
<li>Articles</li>
<li>Webinars</li>
</ul>
</nav>
I am using a template and I am trying to center that navigation bar because I moved the logo. Here is the CSS
/* Menu */
.menu{float:right; padding:14px 20px 0 0;}
.menu ul {list-style:none; margin:0; padding:0px;}
.menu ul * {margin:0; padding:0;}
.menu ul li {position:relative; float:left; padding:0 20px 0 20px; height:35px;}
.menu ul li a{font-family: 'Marmelad', sans-serif;color:#2b2b2b; font-size:16px;}
.menu ul li.selected a{color:#e93139;}
.menu ul li a:hover{color:#e93139;}
<div class="menu">
<ul>
<li class="selected">home</li>
<li>about</li>
<li>competition</li>
<li>workshops</li>
<li>travel</li>
<li>gallery</li>
<li>contact</li>
</ul>
</div>
How do I center this menu?
Remove
.menu {
float: right;
}
Add
.menu {
text-align: center;
}
.menu ul {
display: inline-block;
}
Demo.
text-align: center set on .menu applies to textual content of this element, but also to all it's inline or inline-block children. This is why we give display: inline-block to .menu ul.
Edit the first two lines of css like this:
/* Menu */
.menu{padding:14px 20px 0 0; text-align:center}
.menu ul {list-style:none; margin:0; padding:0px; display:inline-block;}
Use the following css on the menu class:
display: table;
position: relative;
margin-left: auto;
margin-right: auto;
That will center anything, even without specifying the Width.
Change your css to this
body{margin:0, padding:0;}
.menu{position:relative; left:15%; margin:auto;}
.menu ul {list-style:none; margin:0; padding:0px;}
.menu ul * {margin:0; padding:0;}
.menu ul li {display:inline; padding:0 20px 0 20px; height:35px;}
.menu ul li a{font-family: 'Marmelad', sans-serif;color:#2b2b2b; font-size:16px;}
.menu ul li.selected a{color:#e93139;}
.menu ul li a:hover{color:#e93139;}
Change the .menu class to this:
.menu{ padding:14px 20px 0 0; margin:auto; width:50%;}
I have a fiddle going here:
https://jsfiddle.net/vjdz8kxr/
<div class="span-8 last" id="primary_nav_wrap">
<ul>
<li>
Home
</li>
<li>Knowledge
<ul>
<li>kb1</li>
<li>kb2</li>
<li>kb3</li>
</ul>
</li>
<li>Forums
<ul>
<li>forum1</li>
<li>forum2</li>
<li>forum3</li>
</ul>
</li>
<li>Groups
<ul>
<li>group1</li>
<li>group2</li>
<li>group3</li>
</ul>
</li>
<li>Blogs
<ul>
<li>blog1</li>
<li>blog2</li>
<li>blog3</li>
</ul>
</li>
</ul>
#primary_nav_wrap { float:right; }
#primary_nav_wrap ul { list-style:none; margin:0; padding:0; text-transform: uppercase; }
#primary_nav_wrap ul a { display:block; color:#666666; text-decoration:none; font-weight:600; font-size:14px; line-height:30px; padding:0 15px; font-family:proxima-nova,sans-serif;}
#primary_nav_wrap ul li { float:left; padding:2px; }
#primary_nav_wrap ul li:hover {padding:0; border: 2px solid #efefef; border-bottom:2px solid #ee6129; position:relative; z-index:5; }
#primary_nav_wrap #home ul li:hover {border:2px solid #efefef; border-bottom:2px solid #efefef;}
#primary_nav_wrap ul ul { display:none; position:absolute; left:0; background:#fff; text-transform:none; border:2px solid #efefef; margin-left:-2px; margin-top:0; z-index:-1;}
#primary_nav_wrap ul li:nth-last-child(1) ul { left:-101px;} /* Right Most Menu will pop to left so it doesn't bleed off page*/
#primary_nav_wrap ul ul li {float:none; width:220px; text-align:left;}
#primary_nav_wrap ul ul li:hover {background: #ee6129; text-align:left; border:none; padding:2px; }
#primary_nav_wrap ul ul a { line-height:120%; padding: 5px;}
#primary_nav_wrap ul ul ul { top:0; left:100% }
#primary_nav_wrap ul li:hover > ul { display:block}
Basically, I am trying to make a border around the drop down, minus the part of the border that exists under the main menu's title. In this case, I have made that line Orange, so it is obvious whether this is working.
What I am expecting is that the orange line will show on top of the grey, with the z-index I have in place. I also am assuming that since the elements have a position (absolute or relative) that this should work.
Can anyone see what I am doing wrong here?
Here is a solution assuming the colors are basically staying the same.
Remove the border bottom (orange) on the main menu li:hover (border-bottom:none)
Also remove the z-index of 5 from that CSS Rule
Add a background of white to the selector.
Add a negative margin-top to your child (submenu). You added a negative left margin but there is no negative top.
Or just follow this: https://jsfiddle.net/vjdz8kxr/6/
#primary_nav_wrap ul li:hover {padding:0; border: 2px solid #efefef; border-bottom:none; position:relative; background:white;}
#primary_nav_wrap ul ul { display:none; position:absolute; left:0; background:#fff; text-transform:none; border:2px solid #efefef; margin-left:-2px; margin-top:-2px; z-index:-1;}
EDIT:
To add a little explanation: If you have a parent you want the parent to appear behind the child, the parent cannot have a z-index declaration AT ALL. Even if it is negative. Here is some proof: http://codepen.io/tylerism/pen/NGNxWR
I used this for styling navigation bar of my webpage but the color is not changing on hover
.nav {
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
.nav li {
float: left;
}
.nav li a:hover,.nav li a:active {
background-color:#7A991A;
}
.nav li a:link,.nav li a:visited {
display:block;
width:9em;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
HTML code:
<ul class = "nav">
<li>Home</li>
<li>Our Products</li>
<li>Contact us</li>
</ul>
can someone suggest what I did wrong?
Either add !important here:
.nav li a:hover,.nav li a:active {
background-color:#7A991A !important;
}
Or move the properties for :hover (and :active) after those for :link.
Replace .nav a:link with .nav li a
demo
.nav li a, .nav li a:visited {
/*here^^^*/
display:block;
width:9em;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
This is working fine now in the fiddle.
.nav {
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
.nav li {
float: left;
}
.nav li a:link,.nav li a:visited {
display:block;
width:9em;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
.nav li a:hover,.nav li a:active {
background-color:#7A991A;
}
.nav {
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
.nav li {
float: left;
}
.nav li a:visited{
background-color:#98bf21;
}
.nav li a:hover,.nav li a:active {
background-color:#7A991A;
}
.nav li a{
display:block;
width:9em;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
Your a:hover is covered by a:link or so on.
I guess, Since a:hover is of the same level with a:link, Css class at the lower position of the file has higher priority.
You can refer to this:
resolve css conflict
Here is the demo.
.nav {
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
.nav li {
float: left;
}
.nav-link {
display:block;
width:9em;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
.nav-link:hover,.nav-link:active {
background-color:#7A991A;
}
it's not a good practice to nest too many tags, give it a class.
use :link :visited :hover :active only when you want to rewrite the default styles.
css is cascading style sheet, order matters, put .nav-link first to normalize default styles and then overwritten default with :hover and :active.
!important is not a good practice here, just rearrange the order.