In menu I apply last-child declaration to { border: none;}. After that my SUBmenu doesn't show borders even with declaration: {border-bottom: 1px solid black;} Any ideas why my second declaration doesn't work? FIDDLE
P.S I figured out that when I change ul.topmenu.... to ul.... everthing works perfect. But I still need to have ability to use my class name.
/************QUESTION ZONE**************/
ul li a {
border-bottom: 1px solid black;
}
ul.topmenu li:last-child a {
border: none;
}
ul.secondsubmenu li a {
border-bottom: 1px solid black;
}
/**********end question********/
ul, li {
margin: 0;
padding: 0;
list-style: none;
}
ul {
height: 2em;
background: yellow;
}
li {
float: left;
}
li a {
display: block;
line-height: 2em;
width: 6em;
text-align: center;
}
ul.submenu, ul.secondsubmenu {
height: auto;
}
ul.submenu li {
float: none;
}
ul.secondsubmenu {
background: yellow;
color: white;
height: auto;
position: absolute;
left: 12.6em;
top: 6.9em;
margin-left: 1px;
}
<nav>
<ul class="topmenu">
<li>!
<li>!!
<ul class="submenu">
<li>111
<li>222
<li>333
<ul class="secondsubmenu">
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
</li>
</ul>
</li>
<li>222
</ul>
</nav>
change this
ul.topmenu li:last-child a {
border: none;
}
to this
ul.topmenu > li:last-child a {
border: none;
}
when you add this symbol > it means only first children's
example
Because the ul.topmenu li:last-child a is more specific, and all the a tags in the submenu (which belongs to the last li) are matched by this rule
change your second rule to
ul.topmenu .secondsubmenu li a {
border-bottom: 1px solid black;
}
Put the two rules in http://specificity.keegan.st/ to understand their specificity.
Related
I would like to convert the Help link to a drop-down on hover. Do I have to convert this to an un-ordered list or can I use the existing structure. Thanks in advance.
<div class="navbar-project">
Details
Forms
Documents
Help
</div>
CSS
.navbar-project {
width: 100%;
background-color: #fff;
overflow: auto;
margin-top: 25px;
margin-bottom: 25px;
}
.navbar-project a {
float: left;
padding: 12px;
color: #000;
text-decoration: none;
font-size: 20px;
width: 25%; /* Four links of equal widths */
text-align: center;
border-bottom: 3px solid white;
}
.navbar-project a:hover {
border-bottom: 3px solid black;
}
.navbar-project a.active {
background-color: #fff;
border-bottom: 3px solid red;
}
#media screen and (max-width: 500px) {
.navbar-project a {
float: none;
display: block;
width: 100%;
text-align: left;
}
}
the best way to handle the dropdowns is to put them inside ul, you can adopt the below code in your existing code
<nav role="navigation">
<ul>
<li>Button One</li>
<li>Button Two
<ul class="dropdown">
<li>Submenu-1</li>
<li>Submenu-2</li>
<li>Submenu-3</li>
</ul>
</li>
<li>Button Three</li>
</ul>
</nav>
and your css
li {
display: block;
transition-duration: 0.5s;
}
li:hover {
cursor: pointer;
}
ul li ul {
visibility: hidden;
opacity: 0;
position: absolute;
transition: all 0.5s ease;
margin-top: 1rem;
left: 0;
display: none;
}
ul li:hover > ul,
ul li ul:hover {
visibility: visible;
opacity: 1;
display: block;
}
ul li ul li {
clear: both;
width: 100%;
}
You just need turn the Help item in a ul, create the li items and than use the display: none; to hide it, after that you can use hover in the ul and specify that you want the li items to appear using display: block;.
.navbar-project {
width: 100%;
background-color: #fff;
overflow: auto;
margin-top: 25px;
margin-bottom: 25px;
}
.navbar-project a {
float: left;
padding: 12px;
color: #000;
text-decoration: none;
font-size: 20px;
width: 25%; /* Four links of equal widths */
text-align: center;
border-bottom: 3px solid white;
}
.navbar-project a:hover {
border-bottom: 3px solid black;
}
.navbar-project a.active {
background-color: #fff;
border-bottom: 3px solid red;
}
.navbar-project ul{
display: flex;
flex-direction: column;
}
.navbar-project ul li{
display: none;
}
.navbar-project ul:hover li{
display: block;
}
#media screen and (max-width: 500px) {
.navbar-project a {
float: none;
display: block;
width: 100%;
text-align: left;
}
}
<div class="navbar-project">
Details
Forms
Documents
<ul>Help
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
Note: I believe that for the sake of semantics it's good to always use ul or
ol in your nav menu as Kai explained in the other comment, so you just
need create another list inside the first one as I demonstraded.
Edit: I did some modifications and this time the width of 25% is working, this is the example
So I have a border-right on my navbar list which looks like this
However I would like it to look this Is this possible without using images instead?
Thanks.
Navbar css
.navbar .navbar-inner {
padding: 0;
}
.navbar .nav {
margin: 0;
display: table;
width: 100%;
}
.navbar .nav li {
display: table-cell;
width: 11.1%;
float: none;
text-align: center;
left: 4px;
font-weight: bold;
height: 15px;
}
.navbar .nav li a {
border-right: 1px solid black;
height: 10px;
line-height: 10px;
}
#active-link {
text-decoration: underline;
}
.navbar .nav li:first-child a {
border-left: 0;
border-radius: 3px 0 0 3px;
}
.navbar .nav li:last-child a {
border-right: 0;
border-radius: 0 3px 3px 0;
}
Try to set the border-right to the <a> element instead of the <li> element.
Edit 1
Since your border-right is attached to your a element try this:
.nav li { height: 15px; }
.nav li a { height: 10px; }
You can now probably see that the border is smaller than the menu button itself. Just play a little with the heights to see what you want.
Edit 2
Also add this:
.nav li a { line-height: 15px; }
The line-height has to be the same height as the list item.
you may use a pseudo with a border or a single letter
ul {
background:#EBEBEB;
}
li {
display:inline-block;
line-height:3em;
vertical-align:middle;
}
li + li:before {/* do not on first */
content: ' | ';
font-size:0.75em;/* resize it here */
padding:0 1em;
text-shadow: 1px 1px #555;/* or box-shadow or border-style if border used*/
vertical-align:bottom;/* or else */
}
a {
color:#222;
}
a:hover , a.active{
color:#FB853C;
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Clients</li>
<li>Contact Us</li>
</ul>
</nav>
I am having difficulty changing the font color on my Nav bar heres the HTML.
<div id="nav" class = "menu">
<ul>
<li>Home</li>
<li>Team members
<ul class ="sub-menu">
<li>F.E.A.R Ballard</li>
<li>F.E.A.R Snakeshit</li>
<li>Redi</li>
</ul>
</li>
<li>Cool Stuff</li>
<li>Gallery
<ul class ="sub-menu">
<li>Squad</li>
<li>Dayz</li>
<li>Arma III</li>
</ul>
</li>
<li>Contact
<ul class ="sub-menu">
<li>Teamspeak</li>
<li>E-mail</li>
</ul>
</li>
<li>Facebook</li>
<li>Steam</li>
</ul>
</div><!-- links -->
And the CSS
.menu {
margin: 0px;
width: auto;
}
.menu li {
margin: 0px;
}
/*----- Top Level -----*/
.menu ul li {
display: inline-block;
position: relative;
font-size: 15px;
}
/*----- Bottom Level -----*/
.menu li:hover .sub-menu {
z-index: 1;
opacity: 1;
}
.sub-menu {
width: 100%;
border-top: none;
border-left: 1px solid green;
border-right: 1px solid green;
margin: 0px;
position: absolute;
top:100%;
left:0px;
z-index:-1;
opacity:0;
}
.sub-menu li {
display: block;
font-size: 10px;
margin-top: 5px;
padding-bottom: 2px;
border-bottom: 1px solid green;
}
.sub-menu li a {
padding:10px 30px;
margin: 5px;
display:block;
}
#nav {
display: inline;
width: 100%;
height: 150px;
background-color: #879396;
}
#nav ul {
text-align: center;
padding: 0px;
background-color: #9C9898;
}
#nav li {
width: 105px;
background-color: #9C9898;
}
#nav li a {
padding: 0px;
margin: 1px;
}
#nav li a:link
{
text-decoration: none;
font-color: #000;
font-weight: bold;
}
I have tried multiple things i just cant seem to get the font color to change at the moment. Please Note i just want the font to change color, it is currently red and blue which looks horrible.
I have been out the game too long, Please advise.
Try this
#nav li a { color: green; }
Remember it's color:value in CSS and not font-color. Also adding :link to an a tag is not necessary. Just use a instead of a:link unless you really need to target links with actual hrefs
You have to provide color for the anchor tag because it don't inherit the color
check this fiddle
a {color: #fff;}
https://jsfiddle.net/Med7at/j4fxj7gw
I'm attempting to create a simple drop down menu for. What I have currently looks like the following: http://jsfiddle.net/Wt9UC/
Now, what I'm aiming to achieve is something more in the lines of what Fiverr has, see for reference.
To clarify, I'm attempting to get borders (top, left, right) around the menu item hovered and around the entire box of sub-items which appears on-hover. If I'm being unclear in my wording the following image might help.
I tried playing around with layers (e.g. bringing the sub-items to the front in hopes of the border line being covered) but it didn't work out very well.
My HTML:
<ul id="menu">
<li>Test
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</li>
</ul>
My CSS:
#menu a {
color: black;
}
#menu {
padding: 0;
margin: 0;
list-style-type: none;
height: 30px;
}
#menu li {
float: left;
}
#menu li a {
padding: 9px 20px;
display: block;
text-decoration: none;
font-size: 12px;
}
#menu a:hover {
color: #c5cbc9;
border-radius: 3px;
border-left: 1px solid;
border-top: 1px solid;
border-right: 1px solid;
}
/* Submenu */
#menu ul {
border-radius: 3px;
border: 1px solid;
position: absolute;
left: -9999px;
top: -9999px;
list-style-type: none;
}
#menu li:hover { /*had bg*/
position: relative;
}
#menu li:hover ul { /*had bg*/
left: 0px;
top: 30px;
padding: 0px;
}
#menu li:hover ul li a {
padding: 5px;
display: block;
width: 168px;
text-indent: 15px; /*had bg*/
}
#menu li:hover ul li a:hover {
text-decoration: underline;
}
Thanks for your time!
Here is a Complete tutorial for building a Mega Menu. Hope this helps.
http://code.tutsplus.com/tutorials/how-to-build-a-kick-butt-css3-mega-drop-down-menu--net-15129
Demo Link : http://cdn.tutsplus.com/net/uploads/legacy/819_megamenu/demo/index.html
Hover on "4 column"/ Thats your exact requirment/
u need to do the following:
Add a "border-bottom: 1px solid #FFF" to your "#menu li a {}" and then move your dropdown 1px up.
link to fiddle http://jsfiddle.net/cL2x7/
I have been reading and searching the whole day long. I even read this article and tried to work it out but with no success.
So, what I want to do is a CSS menu with sub menus and have the sub menus centered to the page. This is what I have done so far. What I want is that the submenus show up completely centered to the page. Is this possible?
Here's the HTML:
<div id="menu_panel">
<div id="menu_2border">
<div id="menu_section">
<div id='menu1'>
<ul>
<li class='first sub'><a href='#'><span>Hem</span></a>
<ul>
<li><a href='#'><span>Privat</span></a></li>
<li><a href='#'><span>Om Robust</span></a></li>
</ul>
</li>
<li class='sub'><a href='#'><span>Koncept</span></a>
<ul>
<li><a href='#'><span>Insikt</span></a></li>
<li><a href='#'><span>Koncept</span></a></li>
<li><a href='#'><span>Aktivering</span></a></li>
</ul>
</li>
<li class='sub'><a href='#'><span>Uppdrag</span></a>
<ul>
<li><a href='#'><span>Företag</span></a></li>
<li><a href='#'><span>Privat</span></a></li>
</ul>
</li>
<li class='sub'><a href='#'><span>Blogg</span></a>
<ul>
<li><a href='#'><span>Arkiv</span></a></li>
<li><a href='#'><span>Kategori</span></a></li>
</ul>
</li>
<li class='sub'><a href='#'><span>Om Robust</span></a>
<ul>
<li><a href='#'><span>Vad erbjuder vi?</span></a></li>
<li><a href='#'><span>Vilka är vi?</span></a></li>
</ul>
</li>
<li class='sub'><a href='#'><span>Kontakter</span></a>
</li>
</ul>
</div>
</div>
</div>
</div>
And the CSS:
#menu_panel {
width:100%;
height: 49px;
color:#4b4b4b;
display:block;
border-top:#efefef 1px solid;
}
#menu_2border {
width:100%;
border-top:#7a7a7a 1px solid;
}
#menu_section {
width: 960px;
height: 29px;
margin:auto;
padding: 0 0 0 30px;
color:#4b4b4b;
background-color:#fff;
}
#menu1 ul,
#menu1 li,
#menu1 span,
#menu1 a {
margin: auto;
padding: 0;
position: relative;
}
#menu1 {
height: 29px;
background: #fff;
margin:auto;
}
#menu1:after,
#menu1 ul:after {
content: '';
display: block;
clear: both;
}
#menu1 a {
background: #fff;
color: #4b4b4b;
display: inline-block;
font-size: 15px;
line-height: 29px;
padding: 0px 40px;
text-decoration: none;
}
#menu1 ul {
list-style: none;
/* float: left; */
}
#menu1 > ul > li {
float: left;
}
#menu1 li .mainmenu {
border-right:#d8d8d8 1px dotted;
}
#menu1 > ul > li:hover:after { /* faz as setas debaixo dos items do menu */
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
left: 50%;
bottom: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 7px solid #fff;
margin-left: -10px;
}
#menu1 > ul > li.sub {
border-right:#d8d8d8 1px dotted;
}
#menu1 > ul > li.first {
border-left:#d8d8d8 1px dotted;
}
#menu1 > ul > li:hover > a {
background: #efefef;
}
#menu1 .sub {
z-index: 1;
}
#menu1 .sub:hover > ul {
display: block;
background-color:#
}
#menu1 .sub ul { /* faz o formato das caixas do sub-menu */
display: none;
position: absolute;
width: 803px;
height: 189px;
margin:auto;
border-bottom: #dddddd 1px solid;
border-left: #dddddd 1px solid;
border-right: #dddddd 1px solid;
background: #FFF;
}
#menu1 .sub ul li {
*margin-bottom: -1px;
}
#menu1 .sub ul li a {
background: #fff;
filter: none;
font-size: 13px;
display: block;
line-height: 120%;
padding: 10px 30px;
}
Notice that there are pointing arrows in each item of the menu, and they should stay where they are. What should be centered are the big submenu rectangles.
Many thanks in advance!
I dont explicitly understand your situation, do you need something like this? If so, i will make clear understanding on it.
#menu1 .sub ul { /* faz o formato das caixas do sub-menu */
display: none;
position: absolute;
width: 803px;
height: 189px;
margin-left: -401.5px; /* width divided by 2 */
left: 50%;
border-bottom: #dddddd 1px solid;
border-left: #dddddd 1px solid;
border-right: #dddddd 1px solid;
background: #FFF;
}
Example / Screen Result
You need to apply absolute positioning to your drop down menu, and have it relate to your top-level menu by applying relative positioning only to it. That direct relationship means you can set your drop-down menu to left: 0 and right: 0, sticking it to the left-most side and right-most side respectively of the top-level menu regardless of where it appears in your HTML (ie. it will match the width of your top-level ul).
Because you have set position:relative to a number of items, and some of your code might be dependant on that, I can't easily change your code to make it work. However, I put together this quick demonstration on jsfiddle to illustrate my explanation. I hope it helps.