Im trying to make a drop down menu, i cant edit my html and i must style it completely in css.
Im working with css3
i have it already styled i just need it to actually drop down.
the share 'li' will be the only thing seen on top of the page, when you hover over this the rest of the list items will drop down. Therefore the share li will now be at the bottom of the drop down. So the order from the top it will be in once you hover over the share li is - Twitter, facebook, google, linkedin and share.
heres my html for the dropdown:
<ul id = "dropdown">
<li>Twitter</li>
<li>Facebook</li>
<li>Google+</li>
<li>Linkedin</li>
<li>Share</li>
</ul>
so far this is what i have in my css
#dropdown ul {
float: left;
}
#dropdown li {
background: white;
padding: 10px;
width: 120px;
list-style-type: none;
font-family: arial;
font-size: 20px;
text-align: center;
}
#dropdown :nth-child(1) {
background-color: gray;
color: white;
border: 6px solid white;
}
#dropdown :nth-child(2) {
border: 6px solid white;
}
#dropdown :nth-child(3) {
background-color: gray;
color: white;
border: 6px solid white;
}
#dropdown :nth-child(4) {
border: 6px solid white;
}
#dropdown :nth-child(5) {border: 6px solid white;
border-top: 1px solid black;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;
font-weight: bold;}
if anyone could help me out on how to style this to drop down the way i need it too it would be great,
thanks
When you hover over an LI element, you are also hovering over it's container, in this case the ul#dropdown element, so adding the following to the end of your styles should work fine:
#dropdown li {
display: none;
}
#dropdown li:last-child {
display: block;
}
#dropdown:hover li {
display: block;
}
You need to add some code. I've added some code for you. DEMO here
Related
I would like add a border-bottom that displays when I hover over it with the mouse. I want it to override the border underneath so it looks like it changes colour. An example of this can be found here http://www.formaplex.com/services (in the nav bar)
Here is a jsfiddle https://jsfiddle.net/ey006ftg/
Also, a small question: does anyone know why there is a small gap in-between the the links (can be seen when hovering from link to link) and how to get rid of it.
Thanks
Just add this to your css:
nav a {
border-bottom: solid transparent 3px;
}
Here's a jsfiddle with the above code: https://jsfiddle.net/AndrewL32/ey006ftg/1/
You can use a negative margin to overlay the border below, as shown:
nav {
border-top: 1px solid grey;
border-bottom: 3px solid black;
width: 100%;
font-size:0;
}
nav ul {
width: 1056px;
margin: 0 auto;
text-align: center;
width: 1056px;
}
nav ul li {
display: inline-block;
width: 17%;
}
nav ul li a {
display: block;
padding: 21px 0;
font-size: 18px;
text-align: center;
letter-spacing: 1px;
text-transform: uppercase;
}
nav a:hover {
color: orange;
transition: 0.2s;
border-bottom: solid orange 3px;
margin-bottom: -10px;
}
a {
color: black;
text-decoration: none;
outline: 0;
}
<nav>
<ul>
<li>Home</li>
<li>Products</li>
<li>About</li>
<li>Careers</li>
<li>Contact</li>
</ul>
</nav>
As for fighting the inline gap, seeing as you defined a font-size later for the a tag, I would just add a font-size:0, which I added to nav in the above Snippet.
fiddle demo
Simply set your default border to transparent - change color on hover
nav ul li a {
display: block;
padding: 21px 0;
font-size: 18px;
text-align: center;
letter-spacing: 1px;
text-transform: uppercase;
border-bottom: solid transparent 3px; /* add this! */
transition:0.3s; /* or even this :) */
}
Try this fiddle
To set border-bottom the way you want, you have to add border to anchor tag like this:
nav ul li a {
display: block;
padding: 21px 0;
font-size: 18px;
text-align: center;
letter-spacing: 1px;
text-transform: uppercase;
border-bottom: 3px solid black;
}
and to make sure the space between menu items is gone use a little fix adding negative margin to your li tags inside menu like this:
nav ul li {
display: inline-block;
width: 17%;
margin-right: -4px;
}
I have this http://jsfiddle.net/wfhmtx8c/ so it works in jsfiddle?
#nav {
width: 100%;
float: left;
margin: 0 0 3em 0;
padding: 0;
opacity: 0.8;
list-style: none;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc; }
#nav li {
float: left; }
#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #069;
border-right: 1px solid #ccc; }
#nav li a:hover {
color: #c00;
background-color: #fff;
border-bottom: black; }
<ul id="nav">
<li>Taal/Languague:</li>
<li>Nederlands</li>
<li>English</li>
</ul>
But when I put it on my website: http://ub3rhd.nl it doesn't work?
The code is really the same?
Your page is working perfectly fine for me. On hover, it changes color, and on click it redirects me to #.
Also, opacity on elements containing text is not exactly appealing. If i were you, i would get the opacity back at 100%. Language is spelled wrong, too. (: Good luck!
They seem to work, but the style isn't as the one in the jsfiddle.
Edit: They look fine now.
Also, as another user said, the transparency on the menu-bar doesn't look good. :)
When I tried to create a button on which I have a link embedded with the functionality of you clicking the button even if it's outside of the exact string on navigation bar using HTML5 and CSS3, I can't create what I hoped. What am I missing on the following code?
HTML file
<nav>
<ul id='main_menu'>
<li><a href='/'>Home</a></li>
<li><a href='/l1'>Link1</a></li>
<li><a href='/l2'>Link2</a></li>
<li><a href='/l3'>Link3</a></li>
</ul>
</nav>
and, CSS file
ul#main_menu li{
display: inline-block;
background-color: red;
border: 5px solid;
list-style: none;
padding: 3px;
border-radius: 5px 5px;
}
When I opened my browser and accessed to it, the result is a crappy button, with no functionality of clicking outside of the string. How can it be feasible?
Thanks.
please try the following css
ul#main_menu li {
display:block;
list-style:none;
float:left;
}
ul#main_menu li a{
display: inline-block;
background-color: #fefefe;
border: 2px solid;
padding: 3px;
border-radius: 5px 5px;
color:rgb(40,40,40);
text-decoration:none;
}
ul#main_menu li a:hover {
background-color: #ff0000;
border: 3px solid;
}
Here is my solution.
HTML
<nav>
<ul id='main_menu'>
<li><a href='/'>Home</a></li>
<li><a href='/l1'>Link1</a></li>
<li><a href='/l2'>Link2</a></li>
<li><a href='/l3'>Link3</a></li>
</ul>
</nav>
CSS
ul#main_menu {
list-style:none;
}
ul#main_menu li {
display:inline-block;
}
ul#main_menu li a{
display: inline-block;
background-color: #fefefe;
border: 1px solid;
list-style: none;
padding: 3px;
border-radius: 5px 5px;
color:rgb(40,40,40);
text-decoration:none;
}
ul#main_menu li a:hover {
background-color: rgb(150,150,150);
}
Code it self is bit wrong, here is what you have to use.
place it in your css sheet
#main_menu ul{
list-style: none;
}
#main_menu li{
display: inline-block;
background-color: red;
border: 5px solid;
list-style: none;
padding: 3px;
border-radius: 5px 5px;
}
a{
text-decoration:none;
}
#main_menu li:hover{
background-color: green;
}
To create a button link it is very easy in html. The following code will give you html to make a button link very easily. You will also add a bit of css.
HTML
<body>
<nav>
<button onclick="window.location.href='https://example.com'">Example</button>
</nav>
</body>
CSS
body {
background-color: black;
}
nav {
background-color: white;
}
nav button {
background-color: red;
height: 30px;
}
nav button:hover {
cursor: pointer;
background-color: blue;
}
This is what I have created so far. I want to increase the height of the first li item, so that it covers the bottom border of its ul.
In my app I want to create the "selected" effect using this approach. Is this possible without JS?
CSS
ul, li {
margin: 0;
padding: 0;
list-style: none;
}
ul {
border: 5px solid #999;
font-size: 0;
}
li {
padding: 25px;
font-size: 1rem;
border: 5px solid orange;
display: inline-block;
}
HTML
<ul>
<li>foo</li>
<li>bar</li>
<li>baz</li>
</ul>
You can write like this:
li:first-child{
margin-bottom:-5px;
padding-bottom:30px;
}
Check this http://cssdesk.com/QWbvc
You need to add class like 'active' to your selected element, and then write some rules for your element. Check this jsfiddle.net/p85Ey/
you may refer sandeep's answer but also Try this one - just assign fix height to parent element and the see how it works after <li> height increases
ul, li {
margin: 0;
padding: 0;
list-style: none;
}
ul {
border: 5px solid #999;
font-size: 0;
height:79px;
}
li{
padding: 25px;
font-size: 1rem;
border: 5px solid orange;
display: inline-block;
}
li:first-child {
height:25px;
}
OR
li:first-child {
padding-bottom:30px;
}
I have this select that is behaving strange on IE9.
First of all links that should open wiki page not working only on IE9 browser and second problem is on hover, why when cursor pass over help and log off the icon is overridden by hover background color?
<ul id="main">
<li class="username" tabindex="1" > <a>USER</a>
<ul class="curent_buser">
<li class="help">Help</li>
<li class="logoff">LogOff</li>
</ul>
</li>
</ul>
CSS:
ul#main {
color: gray;
width: 120px;
border-left: 1px solid #f2f2f2;
border-right: 1px solid #f2f2f2;
border-top: 1px solid #f2f2f2;
list-style: none;
font-size: 12px;
letter-spacing: -1px;
font-weight: bold;
text-decoration: none;
height:30px;
background:green;
}
ul#main:hover {
opacity: 0.7;
text-decoration: none;
}
#main > li{
background: url('http://cdn1.iconfinder.com/data/icons/crystalproject/24x24/actions/1downarrow1.png') 100% 0 no-repeat;
outline:0;
padding:10px;
}
ul#main li ul {
display: none;
width: 116px;
background: transparent;
border-top: 1px solid #eaeaea;
padding: 2px;
list-style: none;
margin: 7px 0 0 -3px;
}
ul.curent_buser li a {
color: gray;;
cursor: pointer;
}
ul.curent_buser{
background:lime !important;
}
ul#main li ul li a {
display: block;
padding: 5px 0;
position: relative;
z-index: 5;
}
#main li:focus ul, #main li.username:active ul {
display: block;
}
.help{
background: url("http://cdn1.iconfinder.com/data/icons/musthave/16/Help.png") no-repeat 100% center ;
height: 25px;
margin-bottom: 2px;
border-bottom: 1px solid white;
}
.help:hover{
background: #f4f4f4;
}
.logoff{
background: url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/on-off.png") no-repeat 100% center ;
height: 25px;
}
.logoff:hover{
background: #f4f4f4 ;
height: 25px;
}
.help a,.logoff a{
color:gray;
font-family: Museo700Regular,sans-serif;
letter-spacing: 0;
font-size: small;
}
Fiddle: http://jsfiddle.net/RwtHn/1455/
I can at least help you with the Icon issue. The issue is that you are overidding the background with a color. You can have a color or a background image. Not both. You will need to either have a different image in the background that is essentially the same but with different colors, do without the image when you hover or do without the color when you hover.
I'm sorry I can't be more helpful with the IE problem. I sincerely hate IE for things like this.
EDIT: This is something that you can do as mentioned in the comment below
.logoff:hover{
background: #f4f4f4 url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/on-off.png");
height: 25px;
}
Thanks ANeves for this information. I learnt something here too.
OK, for the overridden icon issue credits goes for "ANeves",
but you may use below CSS for preventing extra code lines:
#main > li > ul > li:hover
{
background-color: #f4f4f4;
}
for the IE9 clicking issue, just add below CSS:
#main ul:hover
{
display: block;
}
and that's it
thanks to http://www.cssplay.co.uk/menus/cssplay-click-click.html
On hover you are overriding the background property. Since this property has both the colour and the image, you are overriding the image as well.
Set only the colour, then:
.help:hover{
background-color: #f4f4f4;
}
.logoff:hover{
background-color: #f4f4f4 ;
}
http://jsfiddle.net/RwtHn/1456/