im struggling to remove the "pipe" border i have on the last item of the nav list- my code-
<div id="header">
<ul id="menu">
<li>Home</li>
<li>Stories</li>
<li>Tell your story</li>
<li>Prizes</li>
<li>How to tips</li>
</li>
</div>
And my css
#menu li{
float:left;
list-style-type: none;
display:inline;
padding:0 .9em;
border-right:1px solid #d2d2d2;;
}
#menu li.last{
border-right:none;
}
You could use the adjacent sibling selector to only set a left border for those li elements that have a preceding li sibling:
#menu li {
float: left;
list-style-type: none;
display: inline;
padding: 0 .9em;
}
#menu li + li {
border-left: 1px solid #d2d2d2;
}
li.last doesn't excists. If you want to do it like that you'll have to add a class property to the last list item:
<div id="header">
<ul id="menu">
<li>Home</li>
<li>Stories</li>
<li>Tell your story</li>
<li>Prizes</li>
<li class="last">How to tips</li>
</li>
</div>
And the css
#menu li{
float:left;
list-style-type: none;
display:inline;
padding:0 .9em;
border-right:1px solid #d2d2d2;;
}
#menu li.last{
border-right:none;
}
For all browsers, add the class to the last list item:
<div id="header">
<ul id="menu">
<li>Home</li>
<li>Stories</li>
<li>Tell your story</li>
<li>Prizes</li>
<li class="last">How to tips</li>
</ul>
</div>
Or, easier, for newer browsers, use the last-child pseudo-selector:
#menu li:last-child {
border-right:none;
}
.menu ul li.last{border-right:none;}
Use this code works good .
Related
Im quite new to web design and am having trouble figuring out why my mobile dropdown menu works fine testing on a browser window, but when accessed using a mobile phone the black triangle denoting the 2nd list disappears and none of the links work; nothing happens when I touch them.
I've commented out the 'display:none' on the '#nav ul' selector so you can see how the menu functions, usually this would be uncommented.
Really appreciate any feedback, thanks.
<div id="nav">
<img id="menubtn" src="images/menuIcon.png" alt="Menu button" />
<ul>
<li>Home</li>
<li>Option 1 ▾
<ul>
<li>Option 1.1</li>
<li id="bottomSub">Option 1.2</li>
</ul>
</li>
<li>Option 2</li>
<li>Option 3</li>
<li>Option 4</li>
<li>Option 5</li>
<li id="bottomNav">Option 6</li>
</ul>
</div>
/*--- All style--- */
body{
background-color:lightblue;
}
#nav{
font-family:sans-serif;
z-index:1;
}
#nav a{
color:black;
}
#nav ul li{
list-style:none;
color:black;
}
#nav li:hover ul{
position:absolute;
visibility:visible;
display:block;
}
#nav a:hover{
color:yellow;
}
#nav ul li a{
text-decoration:none;
}
#nav ul ul{
position:relative;
display:none;
}
/* ----Mobile only---- */
#media screen and (max-width:480px){
#menubtn:hover + ul,#menubtn:focus + ul{
display:block;
}
#nav ul {
position:fixed;
top:95px;
background-color:#E5E5E5;
font-size:0.8em;
margin:0;
padding:0;
width:120px;
z-index:1;
/*display:none;*/
}
#nav ul li{
border-left:1px solid black;
border-right:1px solid black;
border-top:1px solid black;
padding:0;
padding:10px 4px;
}
#nav li:hover ul,#nav li:focus ul{
top:50px;
left:119px;
}
#nav ul ul li{
font-size:1.2em;
border-top: 1px solid black;
border-left: 1px solid black;
border-right: 1px solid black;
background-color:#E5E5E5;
padding:10px 4px;
width:130px;
}
#bottomSub, #bottomNav{
border-bottom: 1px solid black;
}
}
try by adding <a> tag on parent
<li>Option 1 ▾
<ul>
<li>Option 1.1</li>
<li id="bottomSub">Option 1.2</li>
</ul>
</li>
and display block to <a>
#nav ul li a {
display:block;
}
If you give padding and other style to <a> tag it would be better because :focus doesn't work on li tag.
Not tested but might solve your problem
I have a dropdown inside a black container of 600px and i would like to have the red childrens show in a width of 100% of container instead of 100% of page width as it happens now. I need this to be in % because the website is responsive.
Please take a look at Jsfiddle Demo
<div id="navcontainer">
<ul>
<li style="display: inline;float: left;">
Filters
<ul style="text-align:left">
<li>Brand</li>
<li>Model</li>
<li>Color</li>
<li>Features</li>
</ul>
</li>
<li style="display: inline;float: right;">
Sort by
<ul style="text-align:right">
<li>Newest</li>
<li>Oldest</li>
<li>Cheapest</li>
</ul>
</li>
</ul>
</div>
add position:relative; for - #navcontainer ul
#navcontainer {
background:#222;
margin: 0 auto;
width: 600px;
}
#navcontainer ul {
text-align:center;
margin:0;
padding:0;
list-style:none;
width:100%;
position:relative;
}
#navcontainer ul li {
display:inline;
/*position:relative;*/
}
#navcontainer ul li a {
display:inline-block;
color:#fff;
font-size:20px;
padding:20px 30px;
}
#navcontainer ul li a:hover {
background:#999;
}
#navcontainer ul ul {
position:absolute;
left:0;
top:100%;
z-index:10;
width:100%;
display:none;
background:red;
}
#navcontainer ul ul li {
float:none;
}
#navcontainer ul ul li a {
text-align:left;
}
#navcontainer ul li:hover ul {
display:block;
}
<div id="navcontainer">
<ul>
<li>
Eggs
<ul>
<li>sub menu</li>
<li>sub menu</li>
<li>sub menu</li>
<li>sub menu</li>
</ul>
</li>
</ul>
</div>
you can use position attribute for many diffrent uses but there you need to hava a contained sub menu and you cant use position:absolute; for parent element
you can use it for child elements and here you do it for both of theme .
change this line to solve your problem .
#navcontainer ul ul {
position:relative;
}
sorry for my bad language skils .
The above description and view the demo you away into a problem solved
You should add the parent element the following characteristics :
#navcontainer {
background: rgb(34, 34, 34) none repeat scroll 0 0;
border: 1px solid;
height: 65px;
margin: 0 auto;
position: relative;
text-align: center;
width: 600px;
}
i have a menu that when i hover has a drop down i follow this
and this but unfortunately im getting different result than expected..im getting list but it is displayed as line horizontally and not vertically like the example here is the code i added to make the drop down
css
ul # menu li ul .submenu{
display:none;
}
ul # menu li : hover ul .submenu{
display:block;
}
here is the html
<div id="menu">
<ul id="menu-list">
<li id="">Home</li>
<li id="">
Menu
<ul class="sub-menu">
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
<li>Sub Menu 4</li>
</ul>
</li>
<li id="">Menu</li>
<li id="">Menu</li>
<li id="">Menu</li>
</ul>
</div>
Here you go:
Updated Fiddle
Just the small change. Made UL id = "menu"
<ul id="menu">
<li id="home">Home</li>
<li id="townoffice">
Menu
<ul class="sub-menu">
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
<li>Sub Menu 4</li>
</ul>
</li>
<li id="busines">Menu</li>
<li id="residents">Menu</li>
<li id="tourists">Menu</li>
</ul>
HTML
<ul id="nav" class="sixteen columns">
<li>Home
</li>
<li>Portfolio
<ul>
<li>Asia
<ul>
<li>Korea</li>
<li>China</li>
<li>Japan</li>
</ul>
</li>
<li>Europe
<ul>
<li>France</li>
<li>Germany</li>
<li>Italy</li>
</ul>
</li>
</ul>
</li>
</ul>
CSS
#nav {
width:800px;
margin:30px 50px;
padding: 0;
float:left;
}
#nav li {
list-style: none;
float: left;
padding:0 10px;
background-color:#367FB3;
color:white;
}
#nav li a:hover {
background-color:#52baff;
color:#fff;
}
//daf adf
/*--temp--*/
#nav ul ul li {
clear:left;
}
#nav ul ul {
position:absolute;
left:14em;
top:0;
}
#nav ul ul li a {
display:block;
padding: 3px 15px;
color: #242424;
text-decoration: none;
font-size:13px;
font-family:"Lato" !important;
}
/*--end temp--*/
#nav li a {
display: block;
padding: 3px 15px;
color: #242424;
text-decoration: none;
font-size:13px;
font-family:"Lato" !important;
}
#nav a:hover {
color:#367FB3;
}
#nav a:active {
color:#367FB3;
}
#nav li ul {
display: none;
width: 14em;
/* Width to help Opera out */
background-color:transparent;
z-index:666;
}
#nav li:hover ul, #nav li.hover ul {
display: block;
position: absolute;
margin:0px -10px;
padding:0px;
}
#nav li:hover ul ul {
display:none;
}
#nav li ul li:hover ul {
display:block
}
#nav li:hover li, #nav li.hover li {
float: none;
line-height:30px;
}
#nav li:hover li a, #nav li.hover li a {
background-color:#367FB3;
color:#fff;
font-size:13px;
font-family:"Lato" !important;
}
#nav li li a:hover {
background-color:#52baff;
color:#fff;
}
FIDDLE
This is what it looks like:
How would I correctly vertically align the navigation with the logo?
HTML:
<div class="menu-nav">
<ul>
<li>Logo</li>
<li>Home</li>
<li>Chat Now</li>
<li>Mobile Chat</li>
<li>Report User</li>
</ul>
</div>
CSS:
.menu-nav {
}
.menu-nav ul li {
display: inline-block;
}
.menu-nav ul li a{
color: #fff;
margin: 10px;
}
.menu-nav ul a.mg {
}
.menu-nav ul li a.logo {
background: url("../img/logo.png") no-repeat;
text-indent: -9999px;
height:60px;
display:block;
width:215px;
padding: 0;
}
You can add a display method named table to the ul tag and then include a display method table-cell with vertical-align:middle to effectively, vertically align your links to the logo.
HTML:
<div class="menu-nav">
<ul class="a">
<li>Logo
</li>
<li class="navItem">Home
</li>
<li class="navItem">Chat Now
</li>
<li class="navItem">Mobile Chat
</li>
<li class="navItem">Report User
</li>
</ul>
</div>
CSS:
.a{
display:table;
}
.a li{
display: table-cell;
vertical-align:middle;
}
Which is better seen through this JSFiddle
EDIT:
You can update your margin by giving the li tags a class and calling that specific class. This can also be found in the JSFiddle above and you can play with it a bit as well.
Please try below code i have just added line-height:60px; for .menu-nav ul li a
HTML :
<div class="menu-nav">
<ul>
<li>Logo</li>
<li>Home</li>
<li>Chat Now</li>
<li>Mobile Chat</li>
<li>Report User</li>
</ul>
</div>
CSS:
.menu-nav {
}
.menu-nav ul li {
display: inline-block;
}
.menu-nav ul li a{
color: #fff;
margin: 10px;
line-height:60px;
}
.menu-nav ul a.mg {
}
.menu-nav ul li a.logo {
background: url("../img/logo.png") no-repeat;
text-indent: -9999px;
height:60px;
display:block;
width:215px;
padding: 0;
}
I have got a submenu which expands from a nav menu type object when I hover over it. Right now, my main nav menu looks like so...
<div id= "navbar">
<ul>
<li><a href= "#" class= "navlink" id= "first"> First
<div class= "firstsubmenu">
<ul>
<li> <a href= "#" class="firstsubmenulink"> First sub menu option </li>
<li> <a href= "#" class="firstsubmenulink"> Second sub menu option </li>
etc...
</ul>
</div></a></li>
<li><a href= "#" class= "navlink" id="second"> Second
<div class= "secondsubmenu">
<ul>
..and so on
</ul>
</div>
Right now, my css is looking like
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
.navlink:link
{
display:block;
width:120px;
text-align:center;
padding:10px;
text-decoration:none;
color:#FFFFFF;
}
.navlink:hover
{
background-color:#ADD8E6;
color:#FFFFFF;
}
.navlink:visited
{
background-color:#ADD8E6;
color:#FFFFFF;
}
Before I tried making each item in the submenu a clickable link, everything showed up perfectly fine. IE: firstsubmenu showed up perfectly. It's css is
.firstsubmenu
{
display : none;
position : absolute;
left : 75px;
top : 32px ;
background-color : red;
width : 930px;
height : 25px;
z-index : 10;
}
But now that I added the links (made every list element within an block), firstsubmenu no longer appears.
The css for each link looked something like this
.firstsubmenulink
{
display:block;
width:120px;
text-align:center;
padding:10px;
text-decoration:none;
color:#FFFFFF;
}
But as I said, the submenu no longer even appears. I realize this is a bit of a long post, but any advice would be great.
You can use the below css and create pure css based menu.
Css:
body { padding: 3em; }
#navbar * { padding:0; margin: 0; font: 1em arial; }
#navbar { position: absolute; z-index: 99; margin: 0 auto; float: left; line-height: 20px; }
#navbar a { display: block; border: 1px solid #fff; background: #EFBE37; text-decoration: none; padding: 3px 10px; color:#666666; }
#navbar a:hover { background: #C6991D; }
#navbar ul li, #navbar ul li ul li { width: 120px; list-style-type:none; }
#navbar ul li { float: left; width: 120px; }
#navbar ul li ul, #navbar:hover ul li ul, #navbar:hover ul li:hover ul li ul{
display:none;
list-style-type:none;
width: 120px;
}
#navbar:hover ul, #navbar:hover ul li:hover ul, #navbar:hover ul li:hover ul li:hover ul {
display:block;
}
#navbar:hover ul li:hover ul li:hover ul {
position: absolute;
margin-left: 120px;
margin-top: -20px;
}
Structure:
<div id="navbar">
<ul>
<li>Home</li>
<li>Abous Us »
<ul>
<li>About us 1</li>
<li>About us 2 »
<ul>
<li>XXX
<li>XXX
<li>XXX
</ul>
</li>
</ul>
</li>
<li>Download</li>
<li>Menus »
<ul>
<li>Menus 1</li>
<li>Menus 2 »
<ul>
<li>Menus 2-1
<li>Menus 2-2
<li>Menus 2-3
</ul>
</li>
</ul>
</li>
<li>Contact</li>
<li>Feedback</li>
</ul>
jsBin live demo
I had to fix lot of errors in your HTML. Here is the css:
#navbar ul{
list-style:none;
margin:0; padding:0;
display:table;
}
#navbar li{
top:0px;
background:#bbf;
display:inline-block;
width:100px;
}
#navbar li ul li{
display:none;
}
#navbar li:hover li{
display:block;
}
And the fixed HTML:
<div id="navbar">
<ul>
<li>
First
<ul class="firstsubmenu">
<li>1. option</li>
<li>2. option</li>
</ul>
</li>
<li>
Second
<ul class="secondsubmenu">
<li>1. option</li>
<li>2. option</li>
</ul>
</li>
</ul>
</div>
Now, after it works, do with colors whatever you want.
Use also alt tags in your links and images, it improves your SEO and compilance.