I've just tried to design a dropdown menu for my navigation. Unfortunately they whole nav and the dropdown is flickering now, when I hover the dropdown button in my nav. The dropdown menu also disappears, when I try to click it.
I can't give you pieces of my code, because Stackoverflow transforms it directly into HTML (don't know why), so I just can give you a link to my test page: http://keinkopf.de/designs/1/
EDIT:
HTML
<nav>
<ul>
<li>Start</li>
<li>Themen
<ul>
<br />
<li>1</li><br />
<li>2</li><br />
<li>3</li><br />
<hr /><hr />
</ul>
</li>
<li>3s</li>
</ul>
</nav>
CSS
ul li ul{
display: none;
background-color: #000000;
width: 400px;
margin-top: 40px;
float: left;
}
ul li ul li{
margin-left: 10px;
}
ul li:hover ul{
display: block; /* display the dropdown */
}
ul {
padding: 0;
list-style: none;
}
ul li ul hr{
border-color: #FFFFFF;
border-width: thin;
border-style: solid;
}
li {
display: inline;
margin-right: -1px;
}
#block1 {
background-color: #000000;
padding-top: 3px;
padding-bottom: 3px;
padding-right: 30px;
padding-left: 30px;
}
#block1:hover {
background-color: #FFFFFF;
padding-top: 2px;
padding-bottom: 2px;
padding-right: 29px;
padding-left: 29px;
color: #000000;
border-color: #000000;
border-style: solid;
border-width: 1px;
}
#block2 {
background-color: #FFFFFF;
padding-top: 2px;
padding-bottom: 2px;
padding-right: 29px;
padding-left: 29px;
color: #000000;
border-color: #000000;
border-style: solid;
border-width: 1px;
}
#block2:hover {
background-color: #000000;
color: #FFFFFF;
}
#block3 {
background-color: #FFFFFF;
padding-top: 2px;
padding-bottom: 2px;
padding-right: 29px;
padding-left: 29px;
color: #000000;
border-color: #000000;
border-style: solid;
border-width: 1px;
}
#block3:hover {
background-color: #000000;
color: #FFFFFF;
}
nav a {
text-decoration: none;
color: #FFFFFF;
font-family: 'Lato', Arial;
font-size: 15pt;
}
nav {
margin-top: 39px;
}
hr {
border-color: #000000;
border-width: 2px;
}
If i can recommend use position absolute so it doesnt affect other objects, and instead of margin use padding.
ul li ul{
position: absolute;
padding-top: 40px;
}
In case you want to have some free space between bar and drop down, then just add some div around that.
You have to position the 'ul' (dropdown-menu) within the 'li' (menu) absolute to the parent.
Every time you hover over your menu-item the menu gets displayed and the position of the menu-item changes. That's why it is flickering.
On top of that you should remove margin-top from your 'ul li ul' and make the listitems li inline-block instead of inline, so that the dropdown gets displayed undrneath the listitem.
i've created the codesnipped here
I believe it has somthing to do with the placement of your tabs. What i am saying is: when your mouse hovers over the tab it shows the rest of the subtabs and therefore pushes the tab off the mouse therefore closing down the menu or in your case causing blinking.
Related
New to html and css, I have checked other questions here and googled it but I am not finding an answer.
I am working on the nav bar and have this annoying space I can not figure out how to get rid of.
I made the background of the nav element blue so you can see what I am referring to and here is a screenshot:
http://imgur.com/v18HTjH
The HTML is:
<div class="topnavbar">
<ul class="nav">
<li class="nav-element">Home</li>
<li class="nav-element">Blog</li>
<li class="nav-element">About Me</li>
<li class="nav-element">Services</li>
<li class="nav-element">testimonials</li>
<li class="nav-element">Contact</li>
</ul>
</div>
The CSS:
.topnavbar{
background-color: blue;
border-top: 5px solid black;
border-bottom: 5px solid black;
position: relative;
margin-left: auto;
margin-right: auto;
width:90%;
border-top-left-radius: 30px;
border-bottom-left-radius: 30px;
border-top-right-radius:30px;
border-bottom-right-radius:30px;
}
body {
top:1px;
background-color: black;
}
ul {
list-style-type: none;
padding: 0;
margin:0;
border-radius: 5px;
overflow: hidden;
}
li {
float: left;
border-radius: 5px;
}
a:link, a:visited {
display: inline-block;
width: 150px;
font-weight: bold;
color: #000000;
background-color: #ffffff;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
}
a:hover, a:active {
background-color: #FA0000;
}
This solution doesnt necessarily take away the space, but it centers the links within the navbar.
http://jsfiddle.net/swm53ran/261/
ul {
list-style-type: none;
padding: 0;
margin:0;
border-radius: 5px;
overflow: hidden;
text-align: center; /* added */
}
li {
/* float: left; */ /* commented out */
display: inline-block; /* added */
border-radius: 5px;
}
hope this helps
remove width attribute .topnavBar in CSS file and check it.
Add width:150px; to the li class,
and change width of .topnavbar to 67%;
Actually you are giving width 90% to .topnavbar but your content of all li's is just 67%.
I am learning to create my first website and I've ran into the first problem that I can't solve. I have a navigation bar in which I want to sit nicely within a wrap but the navigation bar sits beneath it and I can't seem to get it right.
Advice would be great.
http://jsfiddle.net/z4pHZ/2/
HTML
<div class="links_container">
<div class="nav1">
<ul>
<li>Home</li>
<li>About</li>
<li>Challenges</li>
<li>Progress</li>
<li>Forum</li>
</ul>
</div>
CSS
.links_container {
width: 1000px;
height: 35px;
background-color: #33C4AB;
margin-right: auto;
margin-left: auto;
border-bottom-style: double;
border-bottom-width: 2px;
border-color: #000000;
/* [disabled]-webkit-box-sizing: inherit; */
/* [disabled]-moz-box-sizing: inherit; */
/* [disabled]box-sizing: inherit; */
position: absolute;
}
.nav1 {
float: left;
}
.nav1 ul li {
list-style-type: none;
float: left;
display: block;
}
.nav1 ul li a {
color: #FFFFFF;
text-decoration: none;
background-color: #333333;
display: inherit;
height: 35px;
width: 130px;
text-align: center;
line-height: 35px;
border-left: thin solid #CCCCCC;
}
.noBorder {
border-left-style: none !important;
}
.nav1 ul li a:hover {
background-color: #6B6B6B;
height: 35px;
}
.leftedge {
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
}
.rightedge {
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
}
Try using
*{
margin:0;
}
and/or
.nav1 ul {
display: inline;
}
The first code will remove the default browser margin from the webpage, and the second code will display .nav1 ul as an inline element
Also, it's a good idea to think about removing .nav1{float:left;} since it doesn't affect anything, and change the .links_container width to 100% instead of 1000px.
Demo
You can use display: inline for your ul
.nav1 ul {
display: inline;
}
Updated Fiddle
I need some advice and some help. I am not so much of a css guy, but I want to learn.
I am trying adjust some css for my drop down menu.
I have the following issues:
The dropdown button should be as big as the image, leaving only the area of the dropdown triangle.
The dropdown triangle should be aligned vertically in the middle and centered horizontally.
The dropdown options should be aligned with the right border and open inwards towards the left, instead of the opposite.
Can someone help me with adjusting this?
I want to learn the techniques, but trial on error is such a long way.
My code is as folowing:
<html>
<head>
<head>
<body>
<style>
body {
background-color: white;
font: normal 11px Tahoma,Verdana,Arial,Sans-Serif;
color: #222;
height: 380px;
}
.dropdown {
display: block;
display: inline-block;
margin: 0px 3px;
position: relative;
}
/* ===[ For demonstration ]=== */
.dropdown { margin-top: 25px }
/* ===[ End demonstration ]=== */
.dropdown .dropdown_button {
cursor: pointer;
width: auto;
display: inline-block;
padding: 0px 0px;
border: 1px solid silver;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 2px;
font-weight: bold;
color: #717780;
line-height: 16px;
text-decoration: none !important;
background: white;
}
.dropdown input[type="checkbox"]:checked + .dropdown_button {
border: 1px solid #3B5998;
color: white;
background: silver;
-moz-border-radius-topleft: 2px;
-moz-border-radius-topright: 2px;
-moz-border-radius-bottomright: 0px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-radius: 2px 2px 0px 0px;
border-radius: 2px 2px 0px 0px;
border-bottom-color: silver;
}
.dropdown input[type="checkbox"] + .dropdown_button .arrow {
display: inline-block;
width: 1px;
height: 1px;
border-top: 5px solid silver;
border-right: 5px solid transparent;
border-left: 5px solid transparent;
}
.dropdown input[type="checkbox"]:checked + .dropdown_button .arrow { border-color: white transparent transparent transparent }
.dropdown .dropdown_content {
position: absolute;
border: 1px solid #777;
padding: 0px;
background: white;
margin: 0;
display: none;
}
.dropdown .dropdown_content li {
list-style: none;
margin-left: 0px;
line-height: 16px;
border-top: 1px solid #FFF;
border-bottom: 1px solid #FFF;
margin-top: 2px;
margin-bottom: 2px;
}
.dropdown .dropdown_content li:hover {
background: silver;
}
.dropdown .dropdown_content li a {
display: block;
padding: 2px 7px;
padding-right: 15px;
color: black;
text-decoration: none !important;
white-space: nowrap;
}
.dropdown .dropdown_content li:hover a {
color: white;
text-decoration: none !important;
}
.dropdown input[type="checkbox"]:checked ~ .dropdown_content { display: block }
.dropdown input[type="checkbox"] { display: none }
</style>
Here there will be a lot of text and a lot of other menu buttons. So hope the angle of the dropdown will open to the left instead of the right.
<div class="dropdown" id="dropdown">
<input type="checkbox" id="drop1" />
<label for="drop1" class="dropdown_button"><img src="http://ichef.bbci.co.uk/wwfeatures/43_43/images/live/p0/17/tx/p017txf6.jpg" height="43" width="43" /><span class="arrow"></span></label>
<ul class="dropdown_content">
<li>Privacy settings</li>
<li>Account settings</li>
<li>Logout</li>
</ul>
</div>
</body>
</html>
Now I managed to fix the border around the image by correcting the padding padding: 0px 0px; but then I feel like working in blind...can someone help pointing me where to fix my adjustments?
Give your span an id of 'arrowSpan' and apply this style in your css:
#arrowSpan{
display:block;
margin-left:17px;
margin-top:2px;
margin-bottom:5px;
}
Also add position:absolute; and right:0 to your .dropdown .dropdown_content styles.
Here's a fiddle: http://jsfiddle.net/zsp7t/1/
As for collapsing the dropdown when clicking outside, it is possible. There's a bunch of examples online using jQuery, here's a couple that can help you get started:
Use jQuery to hide a DIV when the user clicks outside of it
Hiding a div by selecting anywhere outside of it
You also mentioned that you wanted to learn more, so check these sites out to help you increase your skills:
http://www.codecademy.com/
http://www.codeschool.com/courses
Small question on how to achieve some styling on a HTML / CSS UL menu.
I have a standard UL menu, but having some issues getting my head around how to achieve a certain look to the styling. The UL menu as it currently stands is shown here:
http://jsfiddle.net/WMQqt/
(HTML)
<ul id="nav">
<li>CONTACT US
</li>
<li>HOME
</li>
</ul>
(CSS)
#nav {
list-style: none;
margin-bottom: 10px;
*/ margin-top: -6px;
position: relative;
right: 286px;
z-index: 9;
height: 26px;
padding: 4px 4px 4px 4px;
font-weight: bold;
}
#nav li {
float: right;
margin-right: 10px;
}
#nav a {
display: block;
padding: 5px;
color: #444444;
background: #fff;
text-decoration: none;
border: 1px solid grey;
}
#nav a:hover {
color: #fff;
background: #04B431;
}
I'd like the menu buttons to have a small 1px border, but then some white space padding of around 3px before the background color starts.
Similar to how this looks:
http://jsfiddle.net/6PY7z/
Can this be done using the UL menu method?
Thanks for any advice, I'm no expert with HTML / CSS.
Add margin to a tag and move border to li
#nav li
{
float: right;
margin-right: 10px;
border: 1px solid grey;
}
#nav a
{
display: block;
padding: 5px;
color: #444444;
background: #ccc;
text-decoration: none;
margin:3px;
}
DEMO
you can use the following styles to achieve what you want:
#nav li
{
float: right;
margin-right: 10px;
border: 1px solid grey; /*put original border here*/
}
#nav a
{
display: block;
padding: 5px;
color: #444444;
background: #d8d8d8; /*new background-color*/
text-decoration: none;
border: 3px solid white; /*add white padding here*/
}
http://jsfiddle.net/WMQqt/4/
ok
in html go
<dl><div><dt>F</dt><dd>T</dd></div>
<div><dt>F</dt><dd>T</dd></div>
<div><dt>F</dt><dd>T</dd></div>
<div><dt>F</dt><dd>T</dd></div>
</dl>
in css
dl { display: flex;
flex-direction: column;}
some hints...
dt float left AND
dd float right
Here is a live example:
http://jsfiddle.net/Pzvdv/
<ul id="navigation">
<li>HOME</li>
<li>OUR APPROACH</li>
<li>MENU</li>
<li>GET IN TOUCH</li>
</ul>
#navigation {
float: left;
list-style-type: none;
}
#navigation li {
background-color: #934B00;
border-radius: 6px 6px 0 0;
color: White;
cursor: pointer;
float: left;
font-size: 12px;
margin-right: 6px;
padding: 5px;
}
#navigation li a:link {
color: White;
text-decoration: none;
}
Notice how I can click the link if I'm careful, but when I click the "tab pill" itself, the link isn't clicked.
Any workaround or better ways to accomplish this visual effect?
I want to follow the link href whether the user clicks the actual letters or the container pill.
The padding and other styles have to move from <li> to <a>.
On top of that, you have to add display:block or display:inline-block to the anchor.
Currently, your code does not work as expected, because the padding on the <li> adds a gap between the <li>s border and the anchor.
http://jsfiddle.net/Pzvdv/9/
#navigation li {
color: White;
cursor: pointer;
float: left;
font-size: 12px;
margin-right: 6px;
}
#navigation li a:link {
display: block; /* Or inline-block */
color: White;
text-decoration: none;
background-color: #934B00;
border-radius: 6px 6px 0 0;
padding: 5px;
}
If you add some padding to the link element like so:
#navigation li a {
padding:5px
}
It should work.
Set a to display as a block, i.e.:
a { display:block; }
And add height/width to 100%, and move all padding to there too. That will make it fill the entire list item.
The css for the link needs to be applied to the anchor instead.
#navigation li {
float: left;
}
#navigation li a {
color: White;
text-decoration: none;
background-color: #934B00;
border-radius: 6px 6px 0 0;
color: White;=
font-size: 12px;
margin-right: 6px;
padding: 5px;
cursor: pointer;
}
Like this? http://jsfiddle.net/Pzvdv/17/
You're adding all the presentation styles to the li elements instead of the actual links, just switch them and your pill menu works fine:
#navigation li {
float:left;
}
#navigation li a {
background-color: #934B00;
border-radius: 6px 6px 0 0;
color: White;
cursor: pointer;
font-size: 12px;
margin-right: 6px;
padding: 5px;
}
You should style the <a> element itself.
#navigation {
float: left;
list-style-type: none;
}
#navigation li a:link {
color: White;
text-decoration: none;
background-color: #934B00;
border-radius: 6px 6px 0 0;
color: White;
cursor: pointer;
float: left;
font-size: 12px;
margin-right: 6px;
padding: 5px;
}